/*! CSS Used from: https://xn--bstatestet-q5a.se/app/assets/style.css */
* {
    font-family: 'Inter', sans-serif;
    font-size: 1.1rem;
    box-sizing: border-box;
    color: #444;
    margin: 0;
    padding: 0;
}

html {
    font-size: .9em;
}

body {
    background-color: #f5f8fb;
}

p {
    font-size: 1.1rem;
    margin-top: 15px !important;
}

a {
    color: #00a5db;
}

header.site-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #00478b;
    color: #fff;
    padding: 0.75rem 1rem;
    background: linear-gradient(to left, #ff005b, #1a42c6);
    -webkit-box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.31);
    -moz-box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.31);
    box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.31);
    z-index: 99;
    margin-bottom: 3px;
}

header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.site-header .logo {
    font-size: 1.2rem;
    font-weight: bold;
    color: white;
}

nav.site-nav ul {
    list-style: none;
    display: flex;
    gap: 1rem;
    z-index: 99;
}

.menu-toggle {
    display: none;
    cursor: pointer;
    font-size: 1.4rem;
    background: transparent;
    border: none;
    color: #fff;
}

nav.site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #00478b;
    flex-direction: column;
    transform: translateY(-200%);
    transition: transform 0.3s ease;
    z-index: 99;
}

nav.site-nav ul {
    flex-direction: column;
    gap: 0;
}

nav.site-nav.nav-open {
    transform: translateY(0);
}

.menu-toggle {
    display: block;
}

footer.site-footer {
    background-color: #eee;
    color: #333;
    text-align: center;
    padding: 1rem;
    margin-top: 2rem;
}

footer.site-footer span,
footer.site-footer a {
    font-size: 0.9rem;
}

main {
    margin: 40px 0;
    min-height: calc(100vh - 180px);
}

a {
    color: #00a5db;
}

h1.main-heading {
    font-size: 2.5rem;
    margin-top: 1rem;
    font-weight: 900;
    line-height: normal;
    margin-bottom: 0.5rem;
}

p {
    font-size: 1.2rem;
}

.homepage h2 {
    font-weight: 900;
    font-size: 2rem;
    margin-bottom: 1rem;
}

.homepage h2 {
    margin-bottom: 0px;
}

.popular-categories,
.new-categories {
    margin-bottom: 2rem;
}

.three-column {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    padding-top: 20px;
}

@media (max-width: 767px) {
    .three-column {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    main {
        margin: 0;
        padding: 20px;
    }
}

/*! CSS Used from: Embedded */
*,
::before,
::after {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-scroll-snap-strictness: proximity;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / 0.5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
}

*,
::after,
::before {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: #e5e7eb;
}

::after,
::before {
    --tw-content: '';
}

html {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    -moz-tab-size: 4;
    tab-size: 4;
    font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-feature-settings: normal;
    font-variation-settings: normal;
    -webkit-tap-highlight-color: transparent;
}

body {
    margin: 0;
    line-height: inherit;
}

h1,
h2 {
    font-size: inherit;
    font-weight: inherit;
}

a {
    color: inherit;
    text-decoration: inherit;
}

button {
    font-family: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    font-size: 100%;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    color: inherit;
    margin: 0;
    padding: 0;
}

button {
    text-transform: none;
}

button {
    -webkit-appearance: button;
    background-color: transparent;
    background-image: none;
}

h1,
h2,
p {
    margin: 0;
}

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

button {
    cursor: pointer;
}

:disabled {
    cursor: default;
}

img {
    display: block;
    vertical-align: middle;
}

img {
    max-width: 100%;
    height: auto;
}

.container {
    width: 100%;
}

@media (min-width: 640px) {
    .container {
        max-width: 640px;
    }
}

@media (min-width: 768px) {
    .container {
        max-width: 768px;
    }
}

@media (min-width: 1024px) {
    .container {
        max-width: 1024px;
    }
}

@media (min-width: 1280px) {
    .container {
        max-width: 1280px;
    }
}

@media (min-width: 1536px) {
    .container {
        max-width: 1536px;
    }
}

.m-auto {
    margin: auto;
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

/*! CSS Used from: Embedded */
.two-column {
    display: flex;
    justify-content: space-between;
}

@media (max-width: 767px) {
    .two-column {
        flex-direction: column;
    }
}

/*! CSS Used fontfaces */
@font-face {
    font-family: 'Inter';
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/inter/v18/UcCm3FwrK3iLTcvnUwkT9mI1F55MKw.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
    font-family: 'Inter';
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/inter/v18/UcCm3FwrK3iLTcvnUwAT9mI1F55MKw.woff2) format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: 'Inter';
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/inter/v18/UcCm3FwrK3iLTcvnUwgT9mI1F55MKw.woff2) format('woff2');
    unicode-range: U+1F00-1FFF;
}

@font-face {
    font-family: 'Inter';
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/inter/v18/UcCm3FwrK3iLTcvnUwcT9mI1F55MKw.woff2) format('woff2');
    unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
    font-family: 'Inter';
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/inter/v18/UcCm3FwrK3iLTcvnUwsT9mI1F55MKw.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
    font-family: 'Inter';
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/inter/v18/UcCm3FwrK3iLTcvnUwoT9mI1F55MKw.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Inter';
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/inter/v18/UcCm3FwrK3iLTcvnUwQT9mI1F54.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/inter/v18/UcCo3FwrK3iLTcvvYwYZ8UA3J58.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/inter/v18/UcCo3FwrK3iLTcvmYwYZ8UA3J58.woff2) format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/inter/v18/UcCo3FwrK3iLTcvuYwYZ8UA3J58.woff2) format('woff2');
    unicode-range: U+1F00-1FFF;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/inter/v18/UcCo3FwrK3iLTcvhYwYZ8UA3J58.woff2) format('woff2');
    unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/inter/v18/UcCo3FwrK3iLTcvtYwYZ8UA3J58.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/inter/v18/UcCo3FwrK3iLTcvsYwYZ8UA3J58.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/inter/v18/UcCo3FwrK3iLTcviYwYZ8UA3.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

* {
    font-family: 'Inter', sans-serif;
    font-size: 1.1rem;
    box-sizing: border-box;
    color: #444;
    margin: 0;
    padding: 0;
}


html {
    font-size: .9em;
}

body {
    background-color: #f5f8fb;
}

p {
    font-size: 1.1rem;
    margin-top: 15px !important;
}

a {
    color: #00a5db;
}

/* ========== HEADER ========== */
header.site-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #00478b;
    color: #fff;
    padding: 0.75rem 1rem;
    background: linear-gradient(to left, #ff005b, #1a42c6);
}

header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

header a,
.breadcrumbs a {
    color: white;
}

.breadcrumb a,
.link-box a,
.sub-categories a {
    color: inherit;
}

/* Logo or Site Title */
.site-header .logo {
    font-size: 1.2rem;
    font-weight: bold;
    color: white;
}

/* Navigation */
nav.site-nav ul {
    list-style: none;
    display: flex;
    gap: 1rem;
    z-index: 99;
}

nav.site-nav a {
    color: #fff;
    text-decoration: none;
    font-weight: 500;
}

nav.site-nav a:hover {
    text-decoration: underline;
}




/* Hamburger Icon */
.menu-toggle {
    display: none;
    /* hidden by default on desktop */
    cursor: pointer;
    font-size: 1.4rem;
    background: transparent;
    border: none;
    color: #fff;
}

/* Hide the nav links and show hamburger icon by default */
nav.site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #00478b;
    flex-direction: column;
    transform: translateY(-200%);
    transition: transform 0.3s ease;
    z-index: 99;
}

nav.site-nav ul {
    flex-direction: column;
    gap: 0;
}

nav.site-nav li {
    padding: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

/* Show/hide nav with .nav-open */
nav.site-nav.nav-open {
    transform: translateY(0);
}

/* Show hamburger, hide normal nav */
.menu-toggle {
    display: block;
}

/* ========== FOOTER ========== */
footer.site-footer {
    background-color: #eee;
    color: #333;
    text-align: center;
    padding: 1rem;
    margin-top: 2rem;
}

footer.site-footer p,
footer.site-footer span,
footer.site-footer a {
    font-size: 0.9rem;
}

/** THE REST */

main {
    margin: 40px 0;
    min-height: calc(100vh - 180px);
}

a {
    color: #00a5db;
}

.top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.bottom {
    background-color: aliceblue;
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
}

.top,
.bottom {
    padding: 1.5rem 2.5rem;
}

.left {
    width: 240px;
}

.right {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    justify-content: space-between;
}

.product-item {
    margin: 2rem 0;
    background: white;
    border-radius: 1rem;
    border: 2px solid #0b0b0b;
    font-size: 1.5rem;
}

.product-item h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    font-weight: bold;
}

.usp-list li::before {
    content: "✔️";
    margin-right: .75rem;
}

.usp-list li {
    font-size: 1.1rem;
    line-height: 2.5rem;
}

p {
    font-size: 1.2rem;
}

.price {
    color: #dc0c0c;
}

.btn-cta,
.btn-cta:hover {
    background: #1dc41d;
    border-radius: .5rem;
    color: white;
    font-weight: bold;
    font-size: 1.3rem;
    padding: 1rem 2rem;
    width: 240px;
    text-align: center;
    text-decoration: none;
    margin: 0 20px;
}

.text-link-cta {
    color: #00a5db;
    margin-block: 15px;
    font-size: 1rem;
}

.rating {
    margin-bottom: 10px;
    font-size: 2rem;
    font-weight: 900;
}

.rating-small {
    min-width: 60px;
    font-size: 14px;
    padding-top: 34px;
    position: relative;
}

.rating-small::before {
    content: "⭐";
    position: absolute;
    top: -3px;
    font-size: 30px;
    margin-left: 12px;
}

.name {
    max-height: 41px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    width: 100%;
}

.product-list {
    counter-reset: product;
    list-style: none;
    /* Initialize the counter here */
}

.product-item::before {
    counter-increment: product;
    content: counter(product);
    position: relative;
    top: -25px;
    left: -25px;
    z-index: 1;
    width: 50px;
    height: 50px;
    text-align: center;
    border-radius: 50%;
    justify-content: center;
    line-height: 50px;
    color: white;
    background-color: #00478b;
    font-size: 22px;
    font-weight: 900;
    display: inline-block;
}

.product-price {
    font-weight: bold;
    margin-top: 10px;
    font-size: 1rem;
}

.content-box {
    border-radius: 1rem;
    border: 2px solid #0b0b0b;
    font-size: 1.5rem;
    background: white;
    padding: 2rem 2.5rem;
    margin-top: 2rem;
    position: relative;
}

.summary li {
    margin-bottom: 5px;
}

.summary li a,
.summary li strong,
.summary li {
    font-size: 1.1rem;
}

.summary li a {
    margin-left: .5rem;
    color: #00a5db;
}

.best-in-test-page h2,
.homepage h2 {
    font-weight: 900;
    font-size: 2rem;
    margin-bottom: 1rem;
}

.homepage h2 {
    margin-bottom: 0px;
}

.popular-categories,
.new-categories {
    margin-bottom: 2rem;
}

.top-products {
    display: flex;
    flex-direction: column;
    max-width: 400px;
    border: 1px solid #ccc;
    font-size: 1rem;
}

.top-products h2 {
    background: #632ca3;
    padding: 5px 10px;
    color: white;
    font-weight: 700;
    font-size: 1.5rem;
    text-align: center;
    margin-bottom: 0;
}

.top-products .image {
    max-width: 55px;
}

.product-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    border-bottom: 1px solid #ccc;
}

.top-products .name {
    margin-inline: 5px;
}

.shop-cta a {
    width: 100px;
    display: inline-block;
    text-align: center;
    color: white;
    background: orange;
    border-radius: 5px;
    font-weight: bolder;
    padding: 5px;
}

.tagline {
    font-weight: bold;
    margin-bottom: .7rem;
}

.toc {
    padding: 20px 50px;
    border: 1px solid;
    margin-top: 20px;
}

.toc-heading {
    font-size: 1.3rem;
    font-weight: bold;
    text-align: center;
}

.toc li {
    list-style: initial;
    margin-top: 10px;
}

.toc li a {
    color: #00a5db;
}

.top-products {
    float: right;
    margin-top: 20px;
    margin-left: 20px;
}

.breadcrumbs {
    position: absolute;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    color: white;
    background-color: rgba(0, 0, 0, 0.2);
    padding: 5px 10px;
}

.breadcrumbs a,
.breadcrumbs,
.breadcrumbs strong {
    font-size: 1rem;
}

.important_considerations ul,
.pros-cons ul {
    list-style: inherit;
}

.faq ul,
.summary ol {
    list-style: none;
}

.important_considerations ul,
.pros-cons ul,
.faq ul {
    padding-left: 2rem;
    padding-top: 1rem;
    margin-bottom: 2rem;
}

.faq h3 {
    margin-top: 20px;
    font-weight: bold;
}

.three-column {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    padding-top: 20px;
}

.three-column > div,
.three-column > a {
    padding: 20px;
    background: white;
}

.top-category a {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0 0 10px 0;
    gap: 15px;
}

.sub-categories {
    padding: 10px;
}

.three-column .link-box {
    gap: 15px;
    display: flex;
    flex-direction: row;
    align-items: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.link-box img {
    max-width: 75px;
    max-height: 75px;
}

.middle {
    margin-left: 10px;
}

/*     .rating::before {
    content: "⭐️";
} */

@media (max-width: 767px) {

    .top-products {
        margin: 20px 0;
        float: none;
        max-width: 100%;
    }

    .product-item {
        width: 100%;
        padding: 20px;
    }

    .product-item::before {
        top: -20px;
        left: -20px;
        border-radius: 0;
        border-top-left-radius: 28%;
    }

    .top {
        flex-direction: column;
    }

    .product-image {
        margin-bottom: 10px;
    }

    .breadcrumbs {
        top: 23px;
        left: 16px;
    }

    .three-column {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1024px) {

    main {
        margin: 0;
        padding: 20px;
    }

    .hero-image {
        margin-top: -5px;
        margin-left: -20px;
        width: calc(100% + 40px);
        max-width: none;
        margin-bottom: -10px;
    }

    .best-in-test-page h1 {
        font-size: 2rem;
        margin-top: 1.5rem;
        line-height: normal;
        margin-bottom: 0.5rem;
    }

    /* Bare minimum margins and padding for maximum width */
    .best-in-test-page .intro {
        padding: 0;
        margin: 0;
        border: none;
    }

    .best-in-test-page {
        padding-top: 0;
        margin-top: 0;
        background-color: #fff;
    }

    .best-in-test-page .breadcrumbs {
        top: 0;
        left: -20px;
        font-size: 0.9rem;
    }

    .best-in-test-page .breadcrumbs a {
        font-size: 0.9rem;
    }

    .faq ul {
        padding: 0;
    }

    .content-box {
        border-block: 30px solid #f5f8fb;
        border-inline: 0;
        border-radius: 0;
        margin-inline: -20px;
        padding: 10px 20px;
        margin-block: 0;
    }

    .content-box h2 {
        line-height: normal;
    }

    .middle {
        margin-left: 0;
    }


}