/* ################################################################# FEELING ################################################################# */

/* ----- Fonts ----- */
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap');

:root {--font1: "Merriweather", serif;} /* INSTEAD OF BBC Reith Sans */
:root {--font2: "Lato", sans-serif;} /* INSTEAD OF BBC Reith Serif */

:root {--fontsize-mini: 10px;}
:root {--fontsize-smallest: 12px;}
:root {--fontsize-smaller: 14px;}
:root {--fontsize-small: 16px;}
:root {--fontsize-post-body: 18px;}
:root {--fontsize-large: 20px;}
:root {--fontsize-larger: 24px;}
:root {--fontsize-grid-header-large: 28px;}
:root {--fontsize-header3: 24px;}
:root {--fontsize-header2: 32px;}
:root {--fontsize-header1: 38px;}

/* ----- Colors ----- */
:root {--color-text-rgb: 34,34,34;} /* 34 34 34 */
:root {--color-text: rgb(32, 34, 36);} /* 34 34 34 */
:root {--color-grey-light: rgb(246, 246, 246);} 
:root {--color-grey: rgb(230, 232, 234);} 
:root {--color-grey-dark: rgb(138, 140, 142);} 
:root {--color-grey-darker: rgb(84, 86, 88);} 
:root {--color-blackish: rgb(58, 60, 62);}
:root {--color-yellow: #fffd38;}
:root {--color-red: rgb(235, 0, 0);}
:root {--color-red-dark: rgb(184, 0, 0);}
:root {--color-orange: #f6a21d;}

/* ----- Icons ----- */
.menu-icon .icon {background-image: url(/files/icon/menu_a.svg);}
.menu > .icon {background-image: url(/files/icon/close_a.svg);}
.freebie > .icon {background-image: url(/files/icon/close_a.svg);}
.search .icon {background-image: url(/files/icon/search_b.svg); width: 17px; height: 17px;}
.social .items .facebook .icon {background-image: url(/files/icon/facebook_2.svg);}
.social .items .x .icon {background-image: url(/files/icon/x_2.svg);}
.social .items .tiktok {display: none;}
.social .items .pinterest {display: none;}
.social .items .instagram {display: none;}
.social .items .linkedin  {display: none;}
.social .items .youtube {display: none;}
.social .items .rss {display:none;}
.social .items .mail {display: none;}
.menu .search .icon,
.social .items .item .icon {
   width: 30px;
   height: 30px;
}
.social .items .mail {
   width: 30px;
   height: 30px;
   background-color: var(--color-red);
   border-radius: 50%;
}

/* ----- Gap ----- */
:root {--gap: 15px;}
:root {--gap-section: 100px;}
:root {--gap80: 80px;}
:root {--gap70: 70px;}
:root {--gap60: 60px;}
:root {--gap50: 50px;}
:root {--gap45: 45px;}
:root {--gap40: 40px;}
:root {--gap35: 35px;}
:root {--gap30: 30px;}
:root {--gap25: 25px;}
:root {--gap20: 20px;}
:root {--gap10: 10px;}
:root {--gap5: 5px;}

/* ----- Site Width ----- */
:root {--width-site: 960px;}
:root {--width-header: 1250px;}

.image.col img, 
.single-header .featured-image img, 
.article img, 
.site-categories-images img, 
div:not(.offer) > .logo img {
   display: block;
}

input, textarea {
   font-family: var(--font2);
}

/* ################################################################# VARIOUS ################################################################# */
* {
    box-sizing: border-box;
}
body {
   font-family: var(--font1);
   line-height: 1;
   text-size-adjust: none;
   color: var(--color-text);
}
h1 {
   font-size: var(--fontsize-header1);
   font-weight: 500;
   line-height: 44px;
   margin: var(--gap25) 0 var(--gap);
   letter-spacing: -0.76px;
}
h2 {
   font-weight: 600;
   line-height: 36px;
   margin: var(--gap25) 0 var(--gap);
   font-size: var(--fontsize-header2);
}
h3 {
   font-size: var(--fontsize-header3);
   margin: var(--gap25) 0 var(--gap);
}
.post a {
   color: black;
   font-weight: 600;
}

#menu .logo a,
header .logo a,
.page .mobile .logo a,
footer .logo {
   text-decoration: none;
   font-family: var(--font1);
   color: black;
   font-weight: 600;
}
footer .logo {
   color: white;
}
#menu .logo a > span,
header .logo a > span,
.page .mobile .logo a > span,
footer .logo a > span {
   display: flex;
   font-size: 2.5em;
   text-transform: uppercase;
   text-align: center;
   gap: var(--gap5);
   line-height: 1em;
}
footer .logo a {
   color: white;
   text-decoration: none;
}
#menu .logo a > span > span,
header .logo a > span > span,
.page .mobile .logo a > span > span,
footer .logo a > span > span {
   background-color: black;
   height: 40px;
   min-width: 40px;
   line-height: 38px;
   color: white;
   font-family: var(--font2);
}
.mobile .logo {
   width: fit-content;
}

.article {
   margin: 0;
}

.home > .section,
.directory .content,
.lead .content,
.single article,
.single-body,
.single-footer,
.page .content,
.archive .content {
   width: 100%;
   max-width: var(--width-site);
   margin-right: auto;
   margin-left: auto;
   padding: 0 var(--gap);
}
header .inner {
   max-width: var(--width-header);
   margin-right: auto;
   margin-left: auto;
   padding: 0 var(--gap);
}

.home,
.directory .content,
.lead .content,
.post article,
.partner article,
.best article,
.shop article {
   padding: var(--gap50) var(--gap);
}

/* CONTENT */
.lead .content, 
.single-body, 
.page .content {
   line-height: 27px;
   font-size: var(--fontsize-post-body);
}
.single-body > *:not(blockquote):not(h2):not(h3):not(table):not(.related):not(.faq):not(.brands):not(.types),
.lead .content > *:not(.overview),
.page .content > *:not(blockquote):not(h1):not(h2):not(h3):not(table):not(.related):not(.faq) {
   margin-bottom: var(--gap);
   margin-top: 0;
}

/* HEADER */
header {
   font-family: var(--font2);
}
header .inner {
   display: flex;
   justify-content: space-between;
   align-items: center;
}
.header-normal-1 .inner {
   padding: var(--gap) 0;
}
header .join {
   font-size: var(--fontsize-smallest);
   font-weight: 600;
   text-transform: uppercase;
}
header .join .icon,
header .join .newsletter,
header .site-categories .element-title {
   display: none;
}
header .join > div {
   line-height: 32px;
   padding: 0 var(--gap10);
   letter-spacing: -0.4px;
}
header .join .subscribe {
   background-color: black;
   color: white;
}
header .join > .signin {
   border-left: 0;
   order: 2;
}
header .join > .signin:hover {
   background-color: var(--color-grey-darker);
   color: white;
}
.header-normal-2 {
   border-top: 1px solid var(--color-grey);
   border-bottom: 1px solid var(--color-grey);
}
.header-normal-2 .inner {
   justify-content: center;
}
header .site-categories {
   font-size: var(--fontsize-smaller);
   font-weight: 600;
}
header .site-categories .griditem a {
   padding: 0 var(--gap20);
   display: block;
   line-height: 34px;
}

/* FORSIDE */
.section {
   padding-top: var(--gap);
}
.section .wide {
   width: 67%;
}
.section .side {
   width: 33%;
}

.section .heading {
   width: 100%;
   font-size: var(--fontsize-post-body);
   font-weight: 800;
   line-height: 22px;
   padding: var(--gap10) 0;
   border-top: 2px solid black;
   margin-top: var(--gap40);
}

.grid {
   margin-top: 0px;
}

.gridimg2 .article,
.grid16 .article {
   position: relative;
}
.gridimg2 .text {
   position: absolute;
   bottom: 0px;
   left: 0px;
   right: 0px;
   top: 0px;
   color: white;
}
.gridimg2 .category,
.grid16 .article.box .category,
.side.right .griditem.box .category,
.grid24 .article:first-child .category {
   display: block;
   position: absolute;
   top: 0px;
   left: 0px;
   background-color: black;
   line-height: 26px;
   padding: 0 var(--gap10);
   letter-spacing: -0.4px;
   font-size: var(--fontsize-mini);
   font-family: var(--font2);
   text-transform: uppercase;
   font-weight: 600;
}
.gridimg2 .title,
.side.right .griditem:first-child .title {
   font-size: var(--fontsize-header2);
   font-weight: 600;
   line-height: 34px;
   background-color: rgba(var(--color-text-rgb), 0.7);
   padding: var(--gap);
   bottom: 0px;
   position: absolute;
}

.grid13,
.grid7,
.grid2 {
   grid-template-rows: auto;
}
.grid7 .griditem.article,
.grid13 .griditem.article {
   grid-row: auto;
}
.grid13 .text,
.grid7 .text,
.grid24 .article.normal .text {
   padding: var(--gap) 0;
   gap: var(--gap5);
}
.grid24 .article.normal:not(:first-child) .category,
.grid7 .category,
.grid13 .category,
.side.right .category,
.grid16 .griditem.text .category {
   display: block;
   color: var(--color-grey-darker);
   line-height: 1em;
   letter-spacing: -0.4px;
   font-size: var(--fontsize-mini);
   font-family: var(--font2);
   text-transform: uppercase;
   font-weight: 600;
}
.grid24 .article.normal .title,
.grid7 .title,
.grid2 .title,
.grid13 .title,
.side.right .title,
.grid16 .griditem.text .title {
   font-size: var(--fontsize-small);
   font-weight: 600;
   line-height: 22px;
   letter-spacing: -0.025em;
   order: 2;
}
.grid7 .image img,
.grid13 .image img {
   height: 150px;
}

.grid2 .article.text {
   grid-row: auto;
   background-color: var(--color-grey-light);
   border: 1px solid var(--color-grey-darker);
   padding: var(--gap);
}
.grid2 .article.text > a {
   height: 100%;
   display: block;
}
.grid2 .article.text .text {
   height: 100%;
   justify-content: space-between;
}
.grid2 .more,
.grid24 .article:first-child .read {
   display: block;
   order: 2;
   font-size: var(--fontsize-mini);
   color: var(--color-blackish);
   font-weight: bold;
   align-self: flex-end;
}
.grid2 .griditem.normal > a {
   display: flex;
   flex-direction: row-reverse;
}
.grid2 .griditem.normal > a > div {
   width: 50%;
}
.grid2 .griditem.normal > a .text {
   padding: var(--gap);
   width: calc(50%);
   background: var(--color-grey-light);
   border: 1px solid var(--color-grey);
}
.grid2 .griditem.normal .category {
   display: block;
   font-family: var(--font2);
   text-transform: uppercase;
   font-weight: 600;
   line-height: 1em;
   letter-spacing: -0.4px;
   font-size: var(--fontsize-mini);
   color: var(--color-grey-dark);
   margin-bottom: var(--gap5);
}
.grid2 .griditem.normal .more {
   display: none;
}

.side.right {
   display: flex;
   flex-direction: column;
   gap: var(--gap);
}
.side.right .griditem.article:not(:last-child):not(:first-child),
.grid16 .griditem.text:not(:last-child):not(:first-child) {
   border-bottom: 1px solid var(--color-grey);
   padding-bottom: var(--gap10);
}
.side.right .griditem.article .text .wrapper {
   display: flex;
   flex-direction: column;
   gap: var(--gap5);
}
.side.right .container {
   position: relative;
}
.side.right .griditem:first-child .text {
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   padding: 0;
}
.side.right .griditem:first-child .category,
.grid24 .article:first-child .category {
   color: white;
   background-color: black;
}
.side.right .griditem:first-child .title,
.grid24 .article:first-child .title {
   color: black;
   font-size: var(--fontsize-large);
   line-height: 24px;
}
.side.right .article.box:first-child a:hover .title {
   color: black;
}

.grid16 {
   grid-template-rows: repeat(3, auto);
}
.grid16 .article.box {
   grid-row: 1 / span 3;
}
.grid16 .article.box .title {
   font-size: var(--fontsize-header2);
   font-weight: 600;
   line-height: 34px;
   background-color: var(--color-text);
   padding: var(--gap);
   color: white;
}
.grid16 .category {
   color: white;
}
.email {
   grid-row: 1 / span 1;
   grid-column: 9 / span 4;
   background-color: var(--color-grey-light);
   border: 1px solid var(--color-grey-darker);
   padding: var(--gap);
}
.email .text {
   display: flex;
   flex-direction: column;
   gap: var(--gap5);
}
.email .name-field,
.email .above-email-field,
.email .law {
   display: none;
}
.email .title {
   font-size: var(--fontsize-small);
   font-weight: 700;
   line-height: 22px;
   letter-spacing: -0.025em;
}
.email .description {
   font-size: var(--fontsize-smallest);
}
.email .email-field input {
   letter-spacing: .009em;
   border: 1px solid #d3d3d3;
   padding: 0 var(--gap);
   color: var(--color-grey-darker);
   line-height: 40px;
   width: calc(100% - 2px);
}
.email .email-field input:focus {
   color: var(--color-font);
}
.email .cta {
   background-color: black;
   font-family: var(--font2);
   color: white;
   font-size: var(--fontsize-smallest);
   font-weight: 600;
   line-height: 40px;
   text-transform: uppercase;
   text-align: center;
}
.email .checkbox {
   font-size: var(--fontsize-mini);
   line-height: 16px;
   font-family: var(--font2);
   display: flex;
   align-items: flex-start;
}
.email .checkbox input {
   margin: 2px var(--gap5) 0 0;
}
.grid16 .griditem:nth-child(3) {
   grid-row: 2 / span 1;
}
.grid16 .griditem:nth-child(4) {
   grid-row: 3 / span 1;
}
.grid16 .griditem.text .text {
   gap: var(--gap5);
}

.grid24 {
   grid-template-rows: repeat(12, auto);
}
.grid24 .article {
   position: relative;
}
.grid24 .article:first-child .text {
   color: white;
   padding: var(--gap) 0;
}
.grid24 .article:first-child .container {
   position: relative;
}
.grid24 .article:first-child .title {
   font-size: var(--fontsize-larger);
   font-weight: 600;
   line-height: 28px;
   order: 1;
}

.grid24 .article:first-child .sub {
   display: block;
   font-family: var(--font2);
   font-size: var(--fontsize-smaller);
   line-height: 20px;
   font-weight: 500;
   order: 2;
   color: black;
}
.grid24 .article:first-child .wrapper {
   display: flex;
   flex-direction: column;
   gap: var(--gap10);
}
.grid24 .article.normal .image img {
   height: 130px;
}

.link-block {
   border-top: 2px solid var(--color-grey-darker);
   border-bottom: 2px solid var(--color-grey-darker);
   background-color: var(--color-grey-light);
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   padding: 2% 2% 0;
   margin: var(--gap40) 0 var(--gap35);
}
.link-block > div {
   width: 47%;
   margin-bottom: 2%;
   line-height: 1.4;
   display: flex;
   align-items: center;
}

/* DIRECTORY */
.directory .overview .article .intro,
.directory .overview .article .sub,
.directory .overview .article .name {
   display: block;
}
.directory > .content {
   display: flex;
   flex-direction: column;
   align-items: center;
}
.directory .overview {
   gap: var(--gap);
}
.directory .overview .article {
   grid-column: 1 / span 4;
}
.directory .overview .article > a {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: var(--gap);
   border: 1px solid var(--color-grey);
}
.directory .overview .article > a .text {
   display: flex;
   flex-direction: column;
   justify-content: center;
   padding-right: var(--gap);
}
.directory .overview .article .sub {
   color: var(--color-red);
   font-size: var(--fontsize-mini);
   font-weight: 600;
   text-transform: uppercase;
   order: 1;
   font-family: var(--font2);
}
.directory .overview .article .title {
   order: 2;
   font-weight: 600;
   line-height: 1.2em;
   margin: var(--gap5) 0;
   font-size: var(--fontsize-larger);
}
.directory .intro {
   order: 3;
   margin-top: var(--gap-mini);
   line-height: 1.4em;
   margin-bottom: 0;
   font-size: var(--fontsize-smallest);
}
.directory .overview .article > a .image {
   height: 200px;
}

/* LEAD */
.lead {
   margin-top: var(--gap-section);
   margin-bottom: var(--gap-section);
}
.lead .content .overview {
   display: flex;
   flex-direction: column;
   width: 60%;
   min-width: 700px;
   margin: 0 auto var(--gap);
}
.lead .content .overview .offer {
   padding: var(--gap) 0;
   height: 140px;
   border-bottom: 1px solid var(--color-grey);
   flex-direction: column;
   align-content: space-between;
   justify-content: center;
   font-family: var(--font2);
}
.lead .content .overview .offer:last-child {
   border: 0;
}
.lead .content .overview .offer > div {
   display: none;
}
.lead .content .overview .offer .logo,
.lead .content .overview .offer .logo img,
.lead .content .overview .offer .label,
.lead .content .overview .offer .data1,
.lead .content .overview .offer .data2,
.lead .content .overview .offer .data3,
.lead .content .overview .offer .cta {
   display: block;
}
.lead .content .overview .offer .logo {
   width: 150px;
   height: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
}
.lead .content .overview .offer .logo img {
   width: auto;
   max-height: 75px;
}
.lead .content .overview .offer .label,
.lead .content .detailed .offer .number {
   font-size: var(--fontsize-large);
   font-weight: 700;
}
.lead .content .overview .offer .data1,
.lead .content .overview .offer .data2,
.lead .content .overview .offer .data3 {
   font-size: var(--fontsize-smallest);
}
.lead .content .offer .cta {
   font-size: var(--fontsize-smallest);
   font-family: var(--font2);
   border-radius: 4px;
   font-weight: 600;
   text-transform: uppercase;
   text-decoration: underline;
   text-align: center;
   padding: 0 var(--gap10);
}
.lead .content .detailed .offer  {
   flex-direction: row;
   flex-wrap: wrap;
   display: flex;
   justify-content: flex-start;
   align-items: center;
   border-bottom: 1px solid var(--color-grey);
   margin: 0;
   padding: var(--gap30) 0;
   gap: var(--gap25);
   font-family: var(--font2);
}
.lead .content .detailed .offer > div {
   order: 10;
}
.lead .content .detailed .offer .number {
   order: 1;
   font-size: var(--fontsize-larger);
   background-color: var(--color-red);
   border: 1px solid var(--color-red-dark);
   width: 30px;
   height: 30px;
   border-radius: 50%;
   text-align: center;
   color: white;
}
.lead .content .detailed .offer .logo {
   order: 2;
   width: 90px;
   height: 40px;
   display: flex;
   justify-content: center;
   align-items: center;
}
.lead .content .detailed .offer .logo img {
   max-height: 100%;
   width: auto;
}
.lead .content .detailed .offer .name {
   order: 3;
   font-size: var(--fontsize-grid-header-large);
   font-weight: 700;
   line-height: 1.2em;
}
.lead .content .detailed .offer .stars {
   order: 4;
}
.lead .content .detailed .offer .label {
   order: 5;
   background-color: var(--color-grey);
   border: 1px solid var(--color-grey-dark);
   padding: 0 var(--gap10);
   font-size: var(--fontsize-smallest);
   font-weight: 500;
}
.lead .content .detailed .offer .cta {
   order: 6;
   margin-left: auto;
   font-size: var(--fontsize-smallest);
   font-weight: 500;
}
.lead .content .detailed .offer .description {
   order: 7;
}
.lead .content .detailed .offer .data1,
.lead .content .detailed .offer .data2,
.lead .content .detailed .offer .data3 {
   font-weight: 500;
   font-size: var(--fontsize-smaller);
}
.lead .content .detailed .offer .list {
   margin-left: auto;
}
.lead .content .detailed .offer .list ul {
   display: flex;
   list-style-type: none;
   margin: 0;
   padding: 0;
   gap: var(--gap25);
   font-weight: 500;
   font-size: var(--fontsize-smaller);
}
.lead .content .detailed .offer .law {
   font-size: var(--fontsize-mini);
   color: var(--color-grey-dark);
   line-height: 18px
}

/* ARTICLES AND PAGES */
.post article, 
.partner article, 
.best article, 
.shop article {
   display: grid;
   grid-template-columns: repeat(4, calc((100% - var(--gap)* 2) / 3));
   grid-template-rows: repeat(3, auto);
   gap: var(--gap);
}
.single-header {
   position: relative;
   grid-column: 1 / span 3;
   grid-row: 1 / span 1;
   display: flex;
   flex-wrap: wrap;
/*   background: white;
   border-bottom: 1px solid var(--color-grey);*/
   padding: var(--gap30) 0;
   z-index: 2;
}
.single-header:after {
   left: auto;
   right: calc(0px - (50vw - (var(--width-site) / 2)));
}
.single-header .breadcrumbs,
.single-header .sub,
.single-header .author,
.single-header .time,
.single-header .social {
   display: block;
   font-family: var(--font2);
}
.single-header .social .element-title,
.single-header .featured-image .credits {
   display: none;
}
.single-header .breadcrumbs {
   font-size: var(--fontsize-smallest);
   font-weight: 600;
   line-height: 18px;
}
.single-header .breadcrumbs a {
   color: var(--color-text);
}
.single-header .title {
   margin-top: var(--gap);
}
.single-header .sub {
   width: 100%;
   color: var(--color-grey-dark);
   line-height: 24px;
   font-size: var(--fontsize-large);
   font-weight: 500;
   letter-spacing: -0.3px;
   margin-bottom: var(--gap);
}
.single-header .author {
   color: black;
   font-size: var(--fontsize-smallest);
   font-weight: 600;
   text-transform: uppercase;
}
.single-header .time {
   order: 9;
   font-size: var(--fontsize-smallest);
   color: var(--color-grey-dark);
   font-weight: 500;
   margin-left: var(--gap);
}
.single-header .social {
   order: 10;
   margin-left: auto;
}
.single-header .featured-image {
   order: 11;
   margin-top: var(--gap25);
}
.single-body {
   grid-column: 1 / span 2;
   grid-row: 2 / span 1;
   padding: 0;
}
.single-right {
   grid-column: 3 / span 1;
   grid-row: 2 / span 1;
}
.single-right .article {
   padding: var(--gap10) 0;
   border-bottom: 1px solid var(--color-grey);
}
.single-right .article a {
   display: flex;
   gap: var(--gap);
   color: var(--color-text);
   font-weight: 600;
}
.single-right .article .text {
   width: calc(100% - 95px - var(--gap));
}
.single-right .article .image,
.single-right .article .image img {
   width: 95px;
   height: 65px;
}
.single-footer {
   grid-column: 1 / span 2;
   grid-row: 3 / span 1;
}
.single-bottom {
   grid-column: 1 / span 3;
   grid-row: 4 / span 1;
}
.single-bottom h2 {
   margin-bottom: 0;
   font-family: var(--font2);
   font-weight: 600;
   font-size: var(--fontsize-grid-header-large);
   letter-spacing: -0.0178em;
}
.single-bottom a .title {
   color: var(--color-text);
}

.related {
   margin-bottom: var(--gap);
   border-bottom: 2px solid black;
}
.related a {
   font-weight: 400;
   display: flex;
   flex-direction: column;
}
.related .articles {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
}
.related .article {
   width: 48%;
   margin-bottom: 2%;
   background: var(--color-grey-light);
   border: 1px solid var(--color-grey);
   padding: var(--gap10);
}
.related .image {
   display: none;
}
.related .title {
   font-size: var(--fontsize-small);
   order: 2;
}
.related .category {
   display: block;
   font-family: var(--font2);
   text-transform: uppercase;
   font-weight: 600;
   line-height: 1em;
   letter-spacing: -0.4px;
   font-size: var(--fontsize-mini);
   color: var(--color-grey-dark);
   margin-bottom: var(--gap5);
}

.faq,
.types,
.brands {
   border-top: 2px solid black;
   border-bottom: 2px solid black;
   margin-top: var(--gap40);
   margin-bottom: var(--gap40);
}
.faq h2,
.types h2,
.brands h2 {
   margin-top: var(--gap10);
}
.faq > p,
.types > p,
.brands > p {
   font-family: var(--font2);
}

blockquote {
   font-style: italic;
}

table {
   border-collapse: collapse;
   margin: var(--gap20) 0 var(--gap);
   border-top: 2px solid var(--color-grey-darker);
   border-bottom: 2px solid var(--color-grey-darker);
}
table th,
table td {
   padding: var(--gap10) var(--gap5);
   text-align: left;
}
table th {
   font-size: var(--fontsize-large);
   background-color: var(--color-grey-light);
}
table td {
   font-family: var(--font2);
   line-height: 1.3;
   border-top: 1px solid var(--color-grey);
}

/* BEST */
.best .overview {
   display: flex;
   flex-wrap: wrap;
   gap: var(--gap25);
   margin: var(--gap35) 0;
}
.best .overview h2, 
.best .detailed h2,
.best .others h2 {
    border-top: 2px solid black;
    padding-top: var(--gap10);
    width: 100%;
}
.best .overview .product {
   box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
   padding: var(--gap) var(--gap25);
   flex-basis: calc((100% / 3) - (var(--gap25) * 2) / 3);
   line-height: 1.2em;
   display: flex;
   flex-direction: column;
   gap: var(--gap10);
   position: relative;
   background: white;
}
.best .overview .product .number {
   position: absolute;
   top: -10px;
   left: -10px;
   display: flex;
   align-items: center;
   justify-content: center;
   color: white;
   background-color: var(--color-red);
   box-shadow: -3px 3px 0 0 black;
   font-family: var(--font2);
   width: 30px;
   height: 30px;
}
.best .overview .product .rating2 {
   display: block;
   order: 2;
}
.best .overview .product .image {
   order: 1;
   height: 175px;
   display: flex;
   align-items: center;
   justify-content: center;
}
.best .overview .product .image img {
   max-height: 100%;
   width: auto;
}
.best .overview .product .title {
   order: 3;
   font-weight: 600;
}
.best .overview .product .rating2 {
   order: 2;
}
.best .overview .product .label,
.best .detailed .product .label {
   display: block;
   order: 4;
   color: var(--color-grey-dark);
   font-size: var(--fontsize-smaller);
   font-weight: 600;
}
.best .detailed .product {
   display: flex;
   flex-direction: column;
   align-items: center;
   position: relative;
   padding: var(--gap25) 0 var(--gap50);
}
.best .detailed .product .specifications:before {
   content: "";
   height: 1px;
   position: absolute;
   width: 150px;
   left: 50%;
   transform: translateX(-50%);
   background-color: var(--color-grey);
   top: 0px;
}
.best .detailed .product .label,
.best .detailed .product .summary,
.best .detailed .product .image,
.best .detailed .product .rating1,
.best .detailed .product .specifications,
.best .detailed .product .pros-cons-2-lists,
.best .detailed .product .description,
.best .detailed .product .cta,
.best .detailed .product .jump {
   display: block;
}
.best .detailed .product .label {
   order: 3;
}
.best .detailed .product .image {
   order: 2;
}
.best .detailed .product > .title {
   order: 2;
   font-weight: 700;
   width: calc(100% - var(--gap) * 2);
   font-size: var(--fontsize-header2);
   margin-top: 0px;
   margin-bottom: var(--gap25);
   box-shadow: -8px 8px 0 0 var(--color-grey-dark);
   border: 2px solid black;
   background-color: white;
   font-family: var(--font2);
   padding: var(--gap);
   margin-left: 8px;
   position: relative;
   text-transform: uppercase;
}
.best .detailed .product .rating1 {
   order: 4;
}
.best .detailed .product .summary {
   order: 4;
   line-height: 1.2em;
}
.best .detailed .product .specifications,
.best .detailed .product .pros-cons-2-lists,
.best .detailed .product .pros-cons-2-lists .pros,
.best .detailed .product .pros-cons-2-lists .cons {
   order: 5;
   width: 100%;
   display: flex;
   justify-content: space-between;
}
.best .detailed .product .pros-cons-2-lists .pros-cons {
   width: 100%;
}
.best .detailed .product .specifications {
   padding: var(--gap) 0;
   margin-top: var(--gap);
   position: relative;
}
.best .detailed .product .pros-cons-2-lists .pros,
.best .detailed .product .pros-cons-2-lists .cons {
   padding-bottom: var(--gap);
}
.best .detailed .product .cta {
   order: 7;
   padding: var(--gap25) 0;
}
.best .detailed .product .cta a {
   font-size: var(--fontsize-smallest);
   background-color: black;
   font-family: var(--font2);
   color: white;
   font-weight: 600;
   line-height: 40px;
   text-transform: uppercase;
   text-align: center;
   padding: var(--gap10) var(--gap10);
}
.best .detailed .product .pros-cons-2-lists {
   order: 6;
}
.best .detailed .product .pros-cons-2-lists > .title {
   display: none;
}
.best .detailed .product .description {
   order: 8;
}
.best .detailed .product .jump {
   order: 9;
   font-weight: 600;
   font-size: var(--fontsize-smaller);
   text-decoration: underline;
}
.best .detailed .product .specifications h3,
.best .detailed .product .pros-cons-2-lists h3 {
   font-size: var(--fontsize-small);
   flex-basis: 20%;
   margin-top: 0;
}
.best .detailed .product .specifications ul,
.best .detailed .product .pros-cons-2-lists ul {
   margin: 0;
   padding: 0;
   list-style-type: none;
   display: flex;
   flex-wrap: wrap;
   gap: var(--gap10);
   flex-basis: 77%;
}
.best .detailed .product .specifications ul li {
   padding: var(--gap5) var(--gap10);
   line-height: 1.2em;
   font-size: var(--fontsize-small);
   background-color: var(--color-grey);
   border: 1px solid var(--color-grey-dark);
}
.best .detailed .product .pros-cons-2-lists ul {
   flex-direction: column;
}
.best .detailed .product .pros-cons-2-lists ul li {
   line-height: 1.2em;
   padding-left: 20px;
   position: relative;
}
.best .detailed .product .pros-cons-2-lists .pros li:before {
   content: "\002B";
   position: absolute;
   top: 0px;
   left: 0px;
}
.best .detailed .product .pros-cons-2-lists .cons li:before {
   content: "\2212";
   position: absolute;
   top: 0px;
   left: 0px;
}
.best .others .product .title {
   display: flex;
   gap: var(--gap5);
   align-items: center;
}
.best .others .title:before {
   content: "\2014";
   margin-right: 5px;
   font-family: var(--font1);
}
.best .others .title a {
   line-height: 1.1em;
   margin: var(--gap5) 0;
}

/* SHOP */
.shop .overview {
   grid-template-columns: repeat(3, 1fr);
   gap: var(--gap);
}
.shop .overview .product {
   display: flex;
   flex-direction: column;
   align-items: center;
   box-shadow: 0 3px 4px 0 rgba(0,0,0,.12);
   padding: var(--gap10) var(--gap10) var(--gap80);
   background-color: white;
   text-align: center;
   position: relative;
   font-family: var(--font2);
}
.shop .overview .product a {
   text-decoration: none;
   color: black;
}
.shop .overview .product .price,
.shop .overview .product .cta {
   display: block;
}
.shop .overview .product .image {
   order: 1;
}
.shop .overview .product > .title {
   order: 2;
   font-weight: 600;
   font-size: var(--fontsize-large);
   line-height: 1.2em;
   margin-bottom: var(--gap5);
}
.shop .overview .product .price,
.shop .overview .product .cta {
   position: absolute;
}
.shop .overview .product .price {
   bottom: 55px;
}
.shop .overview .product .cta {
   bottom: 10px;
}
.shop .overview .product .cta a {
   text-transform: uppercase;
   display: inline-block;
   background-color: black;
   color: white;
   font-size: var(--fontsize-smaller);
   font-weight: 600;
   line-height: 40px;
   width: fit-content;
   padding: 0 var(--gap10);
}

/* FOOTER */
footer {
   border-top: 1px solid var(--color-grey);
   margin: var(--gap30) 0;
   padding: var(--gap30);
   font-family: var(--font2);
}
footer .inner {
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
   row-gap: var(--gap30);
}
footer .logo img {
   max-height: 70px;
   max-width: 60%;
}
footer .social {
   order: 9;
}
footer .social .element-title,
footer .social .item .text,
footer .copyright .short,
footer .copyright .long {
   display: none;
}
footer .copyright {
   order: 10;
   font-size: var(--fontsize-mini);
}
footer .logo,
footer [class^="list"],
footer .social {
   width: calc(100% / 6);
}
footer [class^="list"] a {
   font-size: var(--fontsize-smallest);
   color: var(--color-text);
   text-decoration: none;
   line-height: 2em;
}
footer [class^="list"] .element-title {
   font-size: var(--fontsize-smaller);
   font-weight: 600;
   line-height: 2em;
}

/* ----- COOKIES ----- */
#cookies-overlay, #cookies {
   /*display: block !important;*/
}
#cookies-overlay {
   opacity: 0.6;
   background-color: black;
   top: 0;
   bottom: 0px;
   left: 0px;
   right: 0px;
}
#cookies { 
   background-color: black; 
   padding: var(--gap20);
   top: auto;
   left: 0px;
   right: 0px;
   bottom: 0px;
   font-family: var(--font2);
   font-size: var(--fontsize-small);
}
#cookies .icon {
   display: none;
}
#cookies .text {
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: center;
   gap: var(--gap10);
   align-items: center;
   line-height: 1.4em;
   max-width: 500px;
   margin: 0 auto;
   color: white;
}
#cookies .long1,
#cookies .short {
   display: block;
}
#cookies .deny {
   display: none;
}
#cookies .short {
   font-size: var(--fontsize-header2);
   font-family: var(--font1);
   line-height: 1.2em;
   font-weight: 700;
}
#cookies .settings {
   order: 3;
}
#cookies .deny {
   order: 2;
}
#cookies .accept,
#cookies .settings {
   color: var(--color-orange);
   padding: var(--gap5) var(--gap10);
   font-weight: 600;
   width: 150px;
   text-align: center;
   cursor: pointer;
}
#cookies .settings {
   color: var(--color-orange);
}

/* POPUP */
#popup-overlay, #popup {
   /*display: block !important;*/
}
#popup { 
   top: 10%;
   left: 50%;
   transform: translateX(-50%);
   max-width: 650px;
   font-family: var(--font2);
}
#popup-overlay {
   background-color: black;
}
.popup .email .icon {
   display: none;  
}

/* FREEBIE */
.freebie {
   background-color: var(--color-grey);
   border: 1px solid var(--color-grey-dark);
   padding: var(--gap30);
   position: relative;
}
.freebie .icon {
   position: absolute;
   top: 10px;
   right: 10px;
}
.freebie .title {
   font-size: var(--fontsize-larger);
   font-weight: 600;
   line-height: 22px;
   letter-spacing: -0.025em;
   /*order: 2;*/
}
.freebie .description {
   margin: var(--gap) 0;
}
.freebie .cta {
   display: block;
   /*font-size: var(--fontsize-mini);*/
   color: black;
   font-weight: bold;
   align-self: flex-end;
}

@media (max-width: 1200px) {
   header .site-categories .items {
      gap: var(--gap20);
   }
   header .site-categories .griditem a {
      padding: 0;
   }
   .section .inner {
      flex-direction: row;
   }
}
@media (max-width: 1000px) {
   .gridimg1 .griditem, .gridimg2 .griditem, .gridimg3 .griditem, .gridimg4 .griditem, .grid1 .griditem, .grid2 .griditem, .grid3 .griditem, .grid4 .griditem, .grid5 .griditem, .grid6 .griditem, .grid7 .griditem, .grid18 .griditem {
      height: auto;
   }
   
   .single-body > table,
   .page .content > table {
      max-width: 100%;
      overflow-x: auto;
      display: block;
   }
   
   header .site-categories .items {
      gap: var(--gap);
      flex-wrap: wrap;
   }
   header .site-categories .griditem a {
      font-size: var(--fontsize-smallest);
   }

   .gridimg2 .griditem:nth-child(1) {
      margin-top: 0;
   }
   
   .grid16 .article.box {
      grid-row: 1 / span 1;
   }
   .grid16 .email {
      grid-column: 1 / span 4;
   }
   .grid16 .email,
   .grid16 .griditem:nth-child(4) {
      grid-row: 2 / span 1;
   }
   
   .directory .overview .article > a .image {
      height: 100%;
   }
   
   .lead .content .detailed .offer {
      justify-content: center;
   }
   .lead .content .detailed .offer .cta,
   .lead .content .detailed .offer .list {
      margin-left: 0;
   }
   
   .single-header:before, .single-header:after {
      content: none;
   }
   
   .post article, .partner article, .best article, .shop article {
      display: flex;
      flex-direction: column;
   }
}
@media (max-width: 767px) {
   footer .inner {
      justify-content: space-between;
   }
   footer .logo,
   footer .social {
      width: 100%;
   }
   footer [class^="list"] {
      width: 24%;
   }
   
   .shop .overview {
      grid-template-columns: 1fr 1fr;
   }
   
   .best .detailed .product .specifications h3, .best .detailed .product .pros-cons-2-lists h3 {
      flex-basis: 22%;
   }
   
   .best .detailed .product .specifications ul, .best .detailed .product .pros-cons-2-lists ul {
      flex-basis: 75%;
   }
   
   .best .overview .product {
      flex-basis: calc(50% - (var(--gap25) / 2));
   }
   
   .lead .content .overview {
      min-width: 0;
      width: 100%;
     display: grid;
     grid-template-columns: 1fr 1fr;
   }
   .lead .content .overview .offer {
      height: auto;
      align-content: unset;
      justify-content: unset;
   }
   .lead .content .overview .offer .logo {
      height: 40px;
      margin-bottom: var(--gap10);
   }
   .lead .content .overview .offer .logo img {
      max-height: 100%;
   }
   
   .section1 .inner {
      flex-direction: column;
   }
   
   .section .wide,
   .side.right {
      width: 100%;
   }
}
@media (max-width: 600px) {
   .grid24,
   .directory .overview .article > a,
   .best .detailed .product .specifications,
   .best .detailed .product .pros-cons-2-lists .pros, .best .detailed .product .pros-cons-2-lists .cons {
      display: flex;
      flex-direction: column;
   }
   .article.box .container {
      max-height: none;
   }
   
   .directory .overview .article > a .text {
      padding: 0 var(--gap) var(--gap);
   }
   .lead .content .overview {
      grid-template-columns: 1fr;
   }
   
   .best .others .title a {
      border: 0;
      text-decoration: underline;
      text-decoration-color: var(--color-red);
   }
}