.single-body { grid-row: 2 / span 1; grid-column: 2 / span 1; margin: 20px; }


/* ################################################################# FEELING ################################################################# */

/* ----- Fonts ----- */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap');

:root {--font1: "Inter", sans-serif, system-ui;} 

:root {--fontsize-small: 16px;}
:root {--fontsize-post-body: 18px;}
:root {--fontsize-large: 20px;}
:root {--fontsize-larger: 26px;}
:root {--fontsize-box-title: 42px;}
:root {--fontsize-header3: 24px;}
:root {--fontsize-header2: 30px;}
:root {--fontsize-header1: 62px;}

/* ----- Colors ----- */
:root {--color-white: #fff;}
:root {--color-white-rgb: 255,255,255;}
:root {--color-black: #000;}
:root {--color-heading: #2d2e2e;}
:root {--color-body-bg: #fffdf9;}
:root {--color-sand: #ECE9DF;}
:root {--color-font: #403f3e;}
:root {--color-orange: #ff4f00;}
:root {--color-orange-light: #ffbf6e;}
:root {--color-orange-salmon: #fff3e6;}
:root {--color-link: #3d4592;}
:root {--color-link-hover: #2b2358;}
:root {--color-grey-border: #e8e7e4;}
:root {--color-grey-dark: #95928e;}
:root {--color-purple-light: rgb(193, 183, 255);}
:root {--color-green-very-dark: #1f3121;}

/* ----- Icons ----- */
.menu-icon .icon {background-image: url(/files/icon/menu_a.svg);}
.search .icon {background-image: url(/files/icon/search_b.svg);}
.social .items .x .icon {background-image: url(/files/icon/new_x_a.svg);}
.social .items .facebook .icon {background-image: url(/files/icon/facebook_1.svg);}
.social .items .linkedin .icon {background-image: url(/files/icon/linkedin_4.svg);}
.social .items .pinterest .icon {background-image: url(/files/icon/pinterest_35.svg);}
.social .items .tiktok {display:none;}
.social .items .rss {display: none;}
.social .items .youtube {display: none;}
.social .items .mail {display: none;}
.social .items .instagram {display:none;}

/* ----- Border Radius ----- */
:root {--border-radius-small: 10px;}
:root {--border-radius-mini: 5px;}

/* ----- Gap ----- */
:root {--gap: 45px;}
:root {--gap-post-grid: 4rem;}
:root {--gap80: 80px;}
:root {--gap60: 60px;}
:root {--gap50: 50px;}
:root {--gap40: 40px;}
:root {--gap35: 35px;}
:root {--gap30: 30px;}
:root {--gap25: 25px;}
:root {--gap20: 20px;}
:root {--gap15: 15px;}
:root {--gap10: 10px;}
:root {--gap5: 5px;}

/* ----- Site Width ----- */
:root {--width-site: 1280px;}
:root {--width-site2: 800px;}

/* Links */
a {
   color: var(--color-link);
   text-decoration: none;
   font-weight: 600;
}

.article {
   margin: 0;
}

.image.col img, 
.single-header .featured-image img, 
.article img, 
.site-categories-images img, 
.freebie img,
.logo img {
   display: block;
}

input, textarea {
   font-family: var(--font1);
}

/* ################################################################# VARIOUS ################################################################# */
* {
    box-sizing: border-box;
}
body {
   font-family: var(--font1);
   font-size: var(--fontsize-post-body);
   line-height: 20px;
   text-rendering: optimizeSpeed;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   color: var(--color-font);
   background-color: var(--color-body-bg);
}
h1 {
   font-size: var(--fontsize-header1);
   font-weight: 600;
   letter-spacing: .01em;
   line-height: 1.1;
}
h2 {
   letter-spacing: -.01em;
   font-size: var(--fontsize-header2);
   font-weight: 600;
   line-height: 1.16667;
}
h3 {
   letter-spacing: 0;
   font-size: var(--fontsize-header3);
   font-weight: 600;
   line-height: 1.23333;
}

.page .mobile .logo {
   width: auto;
}
header .logo a,
.page .mobile .logo a,
footer .logo a,
.about .logo a {
   text-decoration: none;
   color: black;
   font-family: var(--font1);
}
header .logo a > span,
.page .mobile .logo a > span,
footer .logo a > span,
.about .logo > span {
   display: block;
   font-size: 1.8em;
   font-weight: 800;
   text-align: center;
}
.about .logo > span {
   text-align: left;
}
header .logo a > span > span:first-child,
.page .mobile .logo a > span > span:first-child,
footer .logo a > span > span:first-child,
.about .logo > span > span:first-child{
   color: var(--color-orange);
}

.header-sticky-2 .inner,
.index .section:not(.section11) > .inner,
.link-block,
.directory .content,
.lead .content,
.page .content,
.single > div > article,
.archive .content,
footer .desktop .inner {
   width: 100%;
   max-width: var(--width-site);
   margin-right: auto;
   margin-left: auto;
   padding: 0 var(--gap25);
}
.page .content {
   max-width: var(--width-site2);
   padding: 0 var(--gap25);
}

/* Buttons */
header .join .subscribe,
.best .product .cta,
.shop .overview .product .cta a {
   background-color: var(--color-orange);
   cursor: pointer;
   font-size: var(--fontsize-small);
   font-weight: 600;
   padding: var(--gap15) var(--gap25);
   border-radius: var(--border-radius-mini);
   color: var(--color-white);
}
header .join .subscribe:hover,
.best .product .cta:hover,
.shop .overview .product .cta a:hover {
   background-color: var(--color-link-hover);
}

.header-sticky-2 {
   background-color: var(--color-body-bg);
   box-shadow: 0 1px var(--color-grey-border);
}
.header-sticky-2 .inner {
   display: flex;
   align-items: center;
   padding: var(--gap10) var(--gap25);
   gap: var(--gap25);
}
.header-sticky-2 .element-title,
header .join .newsletter {
   display: none;
}
header .site-categories .items {
   font-size: var(--fontsize-small);
   display: flex;
   gap: var(--gap15);
}
header .join {
   margin-left: auto;
   display: flex;
   gap: var(--gap25);
   align-items: center;
}

.grid2 .griditem.normal:first-child {
   grid-column: 1 / span 7;
}
.grid2 .griditem.list:nth-child(2) {
   grid-column: 8 / span 5;
   display: flex;
   flex-direction: column;
   gap: var(--gap20);
}
.grid2 .category,
.grid2 > .griditem.normal .intro,
.grid2 > .griditem.normal .name {
   display: block;
}
.grid2 > .griditem.normal .image {
   height: 340px;
}
.grid2 > .griditem.normal .text {
   padding: var(--gap);
   gap: var(--gap15);
}
.grid2 .category,
.grid7 .category {
   order: 1;
   font-size: var(--fontsize-small);
   text-transform: uppercase;
   letter-spacing: .1em;
   line-height: 1.3;
   font-weight: 500;
}
.grid2 .title {
   order: 2;
   font-size:  var(--fontsize-header2);
   font-weight: 600;
   line-height: 1.04;
}
.grid2 .list .title {
   font-size: var(--fontsize-box-title);
}
.grid2 .list:first-child .title {
   font-size: var(--fontsize-header3);
   line-height: 1.3;
}
.grid2 .intro {
   order: 3;
   font-size: var(--fontsize-post-body);
   line-height: 1.6;
}
.grid2 .name,
.grid7 .name {
   order: 4;
   font-size: var(--fontsize-small);
   font-weight: 600;
}
.grid2 .list .heading,
.heading {
   font-size: var(--fontsize-header1);
   letter-spacing: .01em;
   font-weight: 600;
   line-height: 1.04;
   margin-bottom: var(--gap30);
}
.grid2 .list:first-child .heading {
   font-size: var(--fontsize-header1);
}
.grid2 .list .griditem {
   padding-bottom: var(--gap20);
}
.grid2 .list:nth-child(2) .griditem:not(:last-child) {
   border-bottom: 2px solid var(--color-black);
}
.grid2 .list .category {
   margin-bottom: var(--gap15);
}
.grid2 .list:first-child a {
   display: flex;
   gap: var(--gap15);
   align-items: center;
}
.grid2 .list:first-child .image,
.grid2 .list:first-child .text {
   flex: 1 1 auto;
}
.grid2 .list:first-child .image {
   min-width: 300px;
   flex-basis: 300px;
   height: 160px;
}

.email {
   background-color: var(--color-orange-salmon);
   padding: var(--gap25) 0 0;
   margin-bottom: var(--gap);
}
.email .text {
   display: flex;
   flex-wrap: wrap;
   font-size: var(--fontsize-post-body);
   gap: var(--gap15);
   justify-content: space-between;
   align-items: flex-end;
}
.email .text .title {
   font-size: var(--fontsize-header1);
   font-weight: 600;
   line-height: 1.1;
   letter-spacing: .01em;
   max-width: 50%;
   order: 1;
   padding-left: var(--gap50);
}
.email .text .checkbox,
.email .text .name-field,
.email .text .above-email-field {
   display: none;
}
.email .description {
   max-width: 50%;
   order: 2;
   padding-right: var(--gap50);
}
.email .description span {
   max-width: 400px;
   display: block;
}
.email .text:before {
   content: "";
   height: 2px;
   width: 100%;
   background-color: var(--color-white);
   margin: var(--gap30) 0 var(--gap5);
   order: 3;
}
.email .fields {
   order: 4;
   padding-left: var(--gap50);
   width: 100%;
   max-width: 80%;
}
.email .fields input {
   font-size: var(--fontsize-box-title);
   border: 0;
   background-color: transparent;
   height: 60px;
   line-height: 60px;
   color: var(--color-grey-dark);
   width: 100%;
}
.email .fields input:focus {
   color: var(--color-black);
}
.email .cta {
   font-weight: 600;
   height: 60px;
   line-height: 60px;
   order: 5;
   margin-right: var(--gap50);
   padding: 0 var(--gap20);
   background-color: var(--color-link);
   color: var(--color-body-bg);
   border-radius: var(--border-radius-mini);
}
.email .cta:hover {
   color: var(--color-grey-dark);
}
.email .text .law {
   background-color: var(--color-body-bg);
   order: 6;
   font-size: var(--fontsize-post-body);
   color: var(--color-grey-dark);
   width: 100%;
   padding: var(--gap20) var(--gap50);
}

.link-block {
   display: flex;
   flex-wrap: wrap;
   justify-content: flex-start;
   gap: 2px;
   padding-bottom: var(--gap);
}
.link-block > div {
   flex: 1 1 calc(50% - 1px - var(--gap20) * 2);
   background-color: var(--color-green-very-dark);
   color: var(--color-white);
   display: flex;
   align-items: center;
   gap: var(--gap5);
   font-weight: 500;
   border-bottom: 2px solid var(--color-blue-light);
   padding: var(--gap5) var(--gap20);
   line-height: 1.2;
   position: relative;
   font-size: var(--fontsize-small);
}
.link-block a {
   height: 50px;
   display: flex;
   align-items: center;
   color: var(--color-white);
}

.about {
   background-color: var(--color-orange-salmon);
   /*color: var(--color-grey-border);*/
   padding: var(--gap40);
   display: flex;
   flex-direction: column;
   font-size: var(--fontsize-post-body);
   line-height: 1.6em;
}
.about .logo img {
   height: 30px;
}
.about .title {
   font-size: var(--fontsize-header1);
   font-weight: 600;
   line-height: 1.04;
   order: 2;
   margin-top: var(--gap20);
}
.about .long {
   order: 3;
}
.about .brand,
.about .short {
   display: none;
}

.section6 .full {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   align-items: flex-end;
}
.section6 .heading {
   margin-bottom: 0;
}
.section6 .search {
   background-color: white;
   display: flex;
   align-items: center;
   padding: var(--gap15) var(--gap20);
   color: var(--color-grey-dark);
   border: 1px solid var(--color-heading);
}
.section6 .search input {
   border: 0;
   background-color: transparent;
   font-size: var(--fontsize-small);
   text-transform: uppercase;
   font-weight: 500;
   letter-spacing: .1em;
}
.section6 .search input:focus {
   color: var(--color-black);
}

.about {
   margin-bottom: var(--gap);
}

.grid7 {
   grid-template-rows: 1fr;
}
.grid7:not(:last-child) {
   margin-bottom: 0;
}
.grid7 .griditem.article,
.grid7 .griditem.freebie {
   grid-row: 1 / span 1;
}
.grid7 .image {
   height: 210px;
}
.grid7 .title {
   font-size: var(--fontsize-box-title);
   line-height: 1.04;
   font-weight: 600;
   order: 2;
   margin-bottom: var(--gap20);
}
.grid7 .category {
   display: block;
   margin: var(--gap15) 0;
}
.grid7 .name {
   display: block;
   order: 3;
   letter-spacing: .02em;
}

.freebie {
   background-color: var(--color-orange-salmon);
   padding: var(--gap30);
   font-size: var(--fontsize-post-body);
   line-height: 1.6;
   color: var(--color-font);
}
.freebie .text {
   display: flex;
   flex-direction: column;
   height: 100%;
}
.freebie .title {
   font-size: var(--fontsize-header1);
   line-height: 1.04;
   order: 1;
}
.freebie .description {
   order: 2;
}
.freebie .cta {
   order: 3;
   font-size: var(--fontsize-small);
   font-weight: 600;
   margin-top: auto;
   width: fit-content;
   font-weight: 600;
   padding: var(--gap10) var(--gap20);
   background-color: var(--color-link);
   color: var(--color-body-bg);
   border-radius: var(--border-radius-mini);
}

/* Directory */
#main .directory {
   margin-top: var(--gap);
   margin-bottom: var(--gap);
}
.directory .overview {
   grid-template-columns: repeat(2, 1fr);
   gap: 0 var(--gap);
}
.directory .article {
   padding-bottom: var(--gap15);
   box-shadow: 0 1px var(--color-grey-border);
}
.directory .article:nth-child(n + 3) {
   padding-top: var(--gap15);
}
.directory .article a {
   display: flex;
   gap: var(--gap15);
   align-items: flex-start;
}
.directory .article a .image {
   flex: 1;
   height: 120px;
}
.directory .article a .text {
   flex: 2;
   display: flex;
   flex-wrap: wrap;
   flex-direction: row;
   font-size: var(--fontsize-post-body);
   line-height: 1.2em;
   gap: var(--gap10);
}
.directory .article a .text .sub {
   display: block;
   order: 4;
   font-weight: 300;
}
.directory .article .text .title {
   order: 3;
   width: 100%;
   font-size: var(--fontsize-header3);
   font-weight: 700;
   line-height: 1.2em;
}

/* LEAD */
.lead .content {
   font-size: var(--fontsize-post-body);
   line-height: 1.82222;
   padding-bottom: var(--gap);
}
.lead .overview .offer .logo,
.lead .overview .offer .number,
.lead .offer .label,
.lead .overview .offer .description,
.lead .overview .offer .stars,
.lead .overview .offer .list,
.lead .offer .law,
.lead .detailed .offer .name,
.lead .detailed .offer .data3 {
   display: none;
}
.lead .overview {
   max-width: var(--width-site2);
   margin: 0 auto;
   box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
   border-radius: var(--border-radius-mini);
}
.lead .overview .offer {
   height: auto;
   padding: var(--gap15);
   font-size: var(--fontsize-post-body);
   justify-content: space-between;
   flex-wrap: nowrap;
}
.lead .overview .offer:not(:last-child) {
   border-bottom: 1px solid var(--color-grey-border);
}
.lead .overview .offer .name {
   width: 16%;
   color: var(--color-link);
   font-size: var(--fontsize-post-body);
   font-weight: 800;
   text-transform: uppercase;
   line-height: 1.2;
}
.lead .overview .offer [class^="data"] {
   width: 17%;
   text-align: center;
   font-size: var(--fontsize-small);
}
.lead .overview .offer .cta {
   width: 32%;
   font-weight: 600;
   text-decoration: underline;
   
   background-color: var(--color-orange);
   border-radius: 40px;
   color: var(--color-white);
   text-align: center;
   padding: var(--gap10) var(--gap5);
   font-size: var(--fontsize-smaller);
   text-decoration: none;
}
.lead .detailed {
   display: flex;
   flex-direction: column;
   gap: var(--gap25);
   padding: var(--gap25) var(--gap15);
}
.lead .detailed .offer {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
   gap: var(--gap25);
   position: relative;
   box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
   /*box-shadow: -16px 16px 0 0 var(--color-purple-light);*/
   border-radius: var(--border-radius-mini);
   /*border: 2px solid var(--color-black);*/
   padding: var(--gap25) var(--gap25);
}
.lead .detailed .offer .number {
   position: absolute;
   top: -10px;
   left: -10px;
   display: flex;
   align-items: center;
   justify-content: center;
   color: white;
   background-color: var(--color-green-very-dark);
   box-shadow: -3px 3px 0 0 var(--color-grey-dark);
   border-radius: var(--border-radius-mini);
   width: 30px;
   height: 30px;
   border: 1px solid black;
   font-weight: 600;
}
.lead .detailed .offer .logo {
   width: 11%;
   order: 1;
}
.lead .detailed .offer .logo img {
   max-height: 50px;
}
.lead .detailed .offer .stars {
   order: 2;
   width: 15%;
   display: flex;
   align-items: center;
   justify-content: center;
}
.lead .detailed .offer [class^="data"] {
   order: 3;
   text-align: center;
   background-color: var(--color-orange-salmon);
   padding: var(--gap25);
   border: 1px solid var(--color-sand);
   border-radius: var(--border-radius-mini);
}
.lead .detailed .offer .cta {
   order: 4;
   width: 20%;
   background-color: var(--color-orange);
   color: var(--color-white);
   padding: var(--gap10) ;
   border-radius: var(--border-radius-small);
   font-weight: 600;
   cursor: pointer;
   text-align: center;
}
.lead .detailed .offer .cta:hover {
   background-color: var(--color-link-hover);
}
.lead .detailed .offer .list {
   order: 5;
   width: 25%;
}
.lead .detailed .offer .list ul {
   margin: 0;
   padding: 0;
   /*list-style-position: inside;*/
   list-style-type: none;
   font-size: var(--fontsize-small);
}
.lead .detailed .offer .list ul li:before {
   content: '✓';
   margin-right: 5px;
}
.lead .detailed .offer .description {
   order: 6;
   width: 70%;
   font-size: var(--fontsize-small);
}

/* BEST */
.best .overview {
   display: flex;
   gap: var(--gap);
   flex-wrap: wrap;
   padding-bottom: var(--gap);
}
.best .overview .product .cta,
.best .detailed .product .cta {
   display: flex;
   align-items: center;
   width: fit-content;
   padding: var(--gap5) var(--gap15);
   height: 2.5em;
}
.best .product .cta a {
   color: var(--color-white); 
}
.best .overview h2 {
   width: 100%;
}
.best .overview .product {
   flex: 1 1 calc(50% - var(--gap) / 2);
   gap: var(--gap10);
   display: grid;
   grid-template-columns: repeat(2, auto);
   grid-template-rows: repeat(4, auto);
   line-height: 1.4;
}
.best .overview .product .image,
.best .overview .product .summary,
.best .overview .product .price,
.best .detailed .product .image,
.best .detailed .product .label,
.best .detailed .product .rating1,
.best .detailed .product .why,
.best .detailed .product .description,
.best .detailed .product .highlights,
.best .detailed .product .specifications,
.best .detailed .product .price {
   display: block;
}
.best .overview .product .title {
   font-weight: 500;
   line-height: 1.2em;
   grid-column: 2 / span 1;
   grid-row: 1 / span 1;
   font-size: var(--fontsize-header3);
}
.best .overview .product .image {
   grid-column: 1 / span 1;
   grid-row: 1 / span 4;
}
.best .overview .product .image img {
   height: auto;
   width: 150px;
}
.best .overview .product .summary {
   font-size: var(--fontsize-small);
   /*line-height: 1.2em;*/
   font-weight: 300;
   grid-column: 2 / span 1;
   grid-row: 2 / span 1;
}
.best .overview .product .price {
   font-size: var(--fontsize-large);
   font-weight: 600;
   grid-column: 2 / span 1;
   grid-row: 3 / span 1;
}
.best .overview .product .cta {
   grid-column: 2 / span 1;
   grid-row: 4 / span 1;
}
.best .detailed {
   display: flex;
   flex-direction: column;
   gap: var(--gap);
}
.best .detailed h2 {
   margin-bottom: 0;
}
.best .detailed .product {
   display: grid;
   grid-template-columns: 35% 60%;
   grid-template-rows: repeat(7, auto);
   column-gap: 5%;
   padding-bottom: var(--gap);
   font-size: var(--fontsize-small);
   line-height: 1.2em;
   font-weight: 300;
   line-height: 1.82222;
}
.best .detailed .product:not(:last-child) {
   border-bottom: 1px solid var(--color-grey-border);
}
.best .detailed .product .image {
   grid-column: 1 / span 1;
   grid-row: 1 / span 4;
   padding: 5%;
   background-color: var(--color-orange-salmon);
   display: flex;
   justify-content: center;
   align-items: center;
}
.best .detailed .product .image img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}
.best .detailed .product .title {
   grid-column: 2 / span 1;
   grid-row: 2 / span 1;
   font-size: var(--fontsize-box-title);
   font-weight: 600;
   display: flex;
   align-items: center;
   line-height: 1.4;
}
.best .detailed .product .label {
   grid-column: 2 / span 1;
   grid-row: 1 / span 1;
   display: flex;
   align-items: center;
}
.best .detailed .product .label span {
   background-color: var(--color-link);
   color: var(--color-white);
   font-weight: 500;
   font-size: var(--fontsize-small);
   border-radius: 10px;
   padding: var(--gap5) var(--gap15);
}
.best .detailed .product .rating1 {
   order: 3;
   grid-column: 2 / span 1;
   grid-row: 3 / span 1;
}
.best .detailed .product .why {
   order: 4;
   grid-column: 2 / span 1;
   grid-row: 4 / span 1;
   font-size: var(--fontsize-small);
   line-height: 1.4em;
   font-style: italic;
   font-weight: 300;
}
.best .detailed .product .description {
   grid-column: 2 / span 1;
   grid-row: 5 / span 1;
}
.best .detailed .product .highlights {
   grid-column: 1 / span 1;
   grid-row: 5 / span 1;
}
.best .detailed .product .highlights ul {
   list-style-type: none;
   margin: 0;
   padding: 0;
   padding: 5%;
   background-color: var(--color-orange-salmon);
}
.best .detailed .product .highlights ul li {
   display: flex;
   flex-direction: column;
   font-size: var(--fontsize-small);
   line-height: 1.4em;
   padding-bottom: var(--gap15);
}
.best .detailed .product .specifications {
   grid-column: 2 / span 1;
   grid-row: 6 / span 1;
}
.best .detailed .product .specifications h3 {
   margin-top: 0;
   margin-bottom: var(--gap5);
}
.best .detailed .product .specifications ul {
   margin-top: 0;
}
.best .detailed .product .price {
   grid-column: 2 / span 1;
   grid-row: 7 / span 1;
   color: var(--color-red);
   font-weight: 500;
   font-size: var(--fontsize-header3);
}
.best .detailed .product .cta {
   grid-column: 2 / span 1;
   grid-row: 8 / span 1;
}
.best .others h2 {
   margin-bottom: 0px;
}
.best .others {
   display: flex;
   flex-direction: column;
   gap: var(--gap20);
   align-items: flex-start;
}
.best .others .product {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   font-size: var(--fontsize-post-body);
   gap: var(--gap5);
}
.best .others .product .label {
   display: block;
   font-size: var(--fontsize-small);
   font-weight: 500;
   letter-spacing: 0.14px;
   color: var(--color-link);
   text-transform: uppercase;
   line-height: 1.1em;
}
.best .others .product .title a:before {
   content: "\002B";
   margin-right: var(--gap5);
}

.single,
.page {
   font-size: var(--fontsize-post-body);
   line-height: 1.82222;
   padding-bottom: var(--gap);
}
.single > div > article {
   display: grid;
   grid-template-rows: repeat(3, auto);
   grid-template-columns: 25% 75%;
   grid-auto-columns: 1fr;
   column-gap: var(--gap-post-grid);
   padding: var(--gap25);
}
.single-header {
   /*color: var(--color-white);*/
   display: grid;
   grid-template-columns: 1fr 1fr;
   grid-template-rows: repeat(4, auto);
   column-gap: 2px;
   grid-row: 1 / span 1;
   grid-column: 1 / span 2;
   padding-bottom: var(--gap40);
   margin-bottom: var(--gap40);
   border-bottom: 2px solid var(--color-black);
}
.single-header .title {
   /*background-color: var(--color-link);*/
   padding: 0 var(--gap30);
   margin: 0;
}
.single-header .breadcrumbs,
.single-header .text {
   display: block;
   /*background-color: var(--color-link);*/
   padding: var(--gap40) var(--gap30);
}
.single-header .breadcrumbs {
   font-size: var(--fontsize-post-body);
   text-transform: uppercase;
   letter-spacing: .1em;
   line-height: 1.3;
   font-weight: 500;
   color: rgba(var(--color-white-rgb), 0.65);
   padding: var(--gap40) var(--gap30);
}
.single-header .breadcrumbs a {
   color: var(--color-white);
   text-decoration: none;
}
.single-header .featured-image {
   grid-row: 1 / span 4;
   grid-column: 2 / span 1;
}
.single-header .featured-image .credits {
   display: none;
}
.single-body {
   grid-row: 2 / span 1;
   grid-column: 2 / span 1;
}
.single-body li {
   margin-bottom: var(--gap10);
}
.related .heading {
   margin-top: var(--gap40);
   margin-bottom: var(--gap10);
}
.related .heading:after {
   content: none;
}
.related .heading h3 {
   font-size: var(--fontsize-box-title);
   font-weight: 600;
   color: black;
   line-height: 1em;
   margin: 0;
}
.related .article > a {
   gap: var(--gap10);
   display: flex;
   flex-direction: column;
   color: black;
   padding: var(--gap15) 0;
}
.related .article:not(:last-child) > a {
   border-bottom: 1px solid black;
}
.related .article .image {
   display: none;
}
.related .article .category {
   display: block;
   order: 1;
   font-size: var(--fontsize-small);
   text-transform: uppercase;
   letter-spacing: .1em;
   line-height: 1.3;
   font-weight: 500;
}
.related .article .title {
   font-size: var(--fontsize-header2);
   font-weight: 600;
   line-height: 1.2em;
   width: 100%;
   color: black;
   order: 2;
}
.single-left {
   grid-row: 2 / span 1;
   grid-column: 1 / span 1;
   display: flex;
   flex-direction: column;
   gap: var(--gap);
}
.single-left .freebie {
   order: 1;
}
.single-left .freebie .title {
   font-size: var(--fontsize-box-title);
   font-weight: 600;
}
.single-left .freebie .description {
   margin: var(--gap15) 0;
}
.single-left .social {
   order: 2;
}
.single-left .social .element-title {
   font-size: var(--fontsize-small);
   text-transform: uppercase;
   letter-spacing: .1em;
   line-height: 1.3;
   font-weight: 500;
   margin-bottom: var(--gap15);
}
.single-left .social .items {
   gap: var(--gap5);
}
.single-left .social .item .text {
   display: none;
}
.single-left .email {
   order: 3;
   padding-top: var(--gap20);
}
.single-left .email .text {
   flex-direction: column;
   flex-wrap: nowrap;
   align-items: flex-start;
}
.single-left .email .title {
   font-size: var(--fontsize-header3);
   padding: 0 var(--gap20);
   max-width: none;
}
.single-left .email .description {
   padding: 0 var(--gap20);
   max-width: none;
   font-size: var(--fontsize-post-body);
   line-height: 1.6;
}
.single-left .email .text:before {
   margin: 0px;
}
.single-left .email .fields {
   max-width: none;
   padding: 0 var(--gap20);
   width: calc(100% - var(--gap20) * 2);
}
.single-left .email .fields input {
   font-size: var(--fontsize-post-body);
   height: auto;
   line-height: 1.2;
}
.single-left .email .cta {
   padding: var(--gap10) var(--gap20);
   height: auto;
   line-height: 1.2;
   margin-left: var(--gap20);
}
.single-left .email .law {
   padding: var(--gap10) 0 0;
}
.single-bottom {
   grid-row: 3 / span 1;
   grid-column: 1 / span 2;
   padding-top: var(--gap-post-grid);
}
.single-bottom .search {
   display: none;
}
.single-bottom h2:first-of-type {
   margin: 0;
}
.single-bottom .grid

blockquote {
   color: var(--color-grey-dark);
   letter-spacing: -.02em;
   font-weight: 600;
   font-size: var(--fontsize-header3);
   line-height: 1.4;
   margin: 1em 0;
}

table {
   width: 100%;
   border-collapse: collapse;
}
table tr,
table tr {
   border-color: var(--color-white);
   border-width: 0px 0px 1px;
   border-style: solid;
}
table tr:first-child {
   padding-bottom: 2px;
}
table tr {
   background-color: var(--color-sand);
}
table tr:nth-last-of-type(odd) {
   background-color: var(--color-orange-salmon);
}
table th,
table td {
   padding: var(--gap10);
   text-align: left;
}

.brands, 
.faq,
.consider,
.types {
   background-color: var(--color-orange-salmon);
   padding: var(--gap20) 0;
   margin-top: var(--gap40);
}
.brands h2,
.types h2,
.faq h2,
.consider h2 {
   margin: 0;
   padding: 0 var(--gap20) var(--gap20);
   border-bottom: 2px solid var(--color-white);
}
.brands h3,
.types h3,
.consider h3,
.faq h3 {
   padding: 0 var(--gap20);
   margin-bottom: var(--gap5);
}
.brands h3:first-of-type,
.types h3:first-of-type,
.consider h3:first-of-type,
.faq h3:first-of-type {
   margin-top: var(--gap25);
}
.brands h3 + p,
.types h3 + p,
.consider h3 + p,
.faq h3 + p {
   margin-top: 0;
}
.brands p,
.types p,
.consider p,
.faq p {
   padding: 0 var(--gap20);
}

.archive .content {
   padding: var(--gap40);
}
.archive .content .heading {
   display: block;
}
/* 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 2px 4px 0 var(--color-grey-border);
   padding: var(--gap10) var(--gap10) var(--gap80);
   text-align: center;
   position: relative;
}
.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-post-body);
   line-height: 1.2em;
}
.shop .overview .product .price,
.shop .overview .product .cta {
   position: absolute;
}
.shop .overview .product .price {
   bottom: 50px;
}
.shop .overview .product .cta {
   bottom: 10px;
}
.shop .overview .product .cta a {
   font-size: var(--fontsize-post-body);
   text-transform: uppercase;
   display: inline-block;
   padding: 5px var(--gap15);
   font-weight: 500;
}

footer {
   font-size: var(--fontsize-post-body);
   color: var(--color-grey-dark);
   padding: var(--gap80) 0;
   border-top: 1px solid var(--color-grey-border);
}
footer .inner {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
}
footer a {
   color: var(--color-font);
}
footer .social,
footer .copyright .medium,
footer .copyright .long {
   display: none;
}
footer [class^="list"] {
   order: 1;
   display: flex;
   flex-direction: column;
   row-gap: var(--gap20);
}
footer [class^="list"] .element-title {
   color: var(--color-font);
   font-size: var(--fontsize-small);
   text-transform: uppercase;
   font-weight: 700;
}
footer .inner:before {
   content: "";
   order: 2;
   width: 100%;
   border-top: 1px solid var(--color-heading);
   display: block;
   height: 1px;
   margin: var(--gap30) 0;
}
footer .copyright {
   order: 3;
}
footer .logo {
   order: 4;
}
footer .logo img {
   height: 25px;
}

/* ----- Cookies ----- */
#cookies-overlay, #cookies {
   /*display: block !important;*/
}
#cookies-overlay {
   background-color: var(--color-black);
}
#cookies { 
   background-color: var(--color-orange-salmon); 
   padding: var(--gap20);
   top: 10%;
   left: 50%;
   transform: translateX(-50%);
   max-width: 500px;
}
#cookies .icon {
   display: none;
}
#cookies .text {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   gap: var(--gap10);
   align-items: center;
   font-size: var(--fontsize-small);
   line-height: 1.4em;
   justify-content: center;
}
#cookies .short {
   font-weight: 600;
}
#cookies .long1 {
   display: block;
   padding-bottom: var(--gap15);
}
#cookies .long2 {display: none;} 
#cookies .deny,
#cookies .settings,
#cookies .accept {
   text-decoration: underline;
   order: 3;
}
#cookies .accept {
   color: var(--color-white);
   background-color: var(--color-link);
   text-decoration: none;
   padding: var(--gap5) var(--gap10);
   font-weight: 500;
}

@media (max-width: 1200px) {
   .grid2 .list:first-child .image {
      min-width: 220px;
      flex-basis: 220px;
   }
   .grid2 .list:first-child .title {
      font-size: var(--fontsize-header3);
   }
   .grid2 > .griditem.normal .text {
      padding: var(--gap30);
   }
   
   .email .text .title,
   .email .text .description{
      max-width: 100%;
      padding: 0 var(--gap50);
   }
   .email .description span {
      max-width: 100%;
   }
   
   .single-left .email .title,
   .single-left .email .description {
      padding: 0 var(--gap20);
   }
}
@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;
   }
   
   .lead .detailed .offer .cta {
      order: 2;
      min-width: 250px;
   }
   .lead .detailed .offer .description {
      width: 100%;
   }
   .lead .detailed .offer [class^="data"] {
      width: 27%;
   }
   
   .single > div > article {
      display: flex;
      flex-direction: column;
   }
   .single-left {
      margin-top: var(--gap);
   }
   
   footer .inner {
      row-gap: var(--gap);
   }
   footer [class^="list"] {
      flex-basis: 25%;
   }
}
@media (max-width: 767px) {
   .email .text .title, .email .text .description,
   .email .cta,
   .email .fields {
      max-width: 100%;
      padding: 0 var(--gap20);
   }
   .link-block {
      padding: 0 0 var(--gap);
   }
   .about {
      padding: var(--gap20);
   }
   .directory .overview {
      grid-template-columns: 1fr;
   }
   
   .lead .detailed .offer [class^="data"] {
      width: 46%;
   }
   .lead .detailed .offer .list,.lead .detailed .offer .cta {
      min-width: 0;
      width: 100%;
   }
   
   .single-header {
      display: flex;
      flex-direction: column;
   }
   .single-header .featured-image {
      order: -1;
   }
   
   
   
   .best .detailed .product {
      grid-template-columns: 1fr;
      gap: var(--gap10);
   }
   .best .detailed .product .label,
   .best .detailed .product .title,
   .best .detailed .product .rating1,
   .best .detailed .product .why,
   .best .detailed .product .description {
      grid-column: 1 / span 1;
   }
   .best .detailed .product .image {
      grid-row: 4 / span 1;
   }
   .best .detailed .product .why {
      grid-row: 5 / span 1;
   }
   .best .detailed .product .description {
      grid-row: 6 / span 1;
   }
   .best .detailed .product .highlights {
      grid-row: 7 / span 1;
   }
   .best .detailed .product .specifications {
      grid-row: 8 / span 1;
      grid-column: 1 / span 1;
   }
   .best .detailed .product .price {
      grid-row: 9 / span 1;
      grid-column: 1 / span 1;
   }
   .best .detailed .product .cta {
      grid-row: 10 / span 1;
      grid-column: 1 / span 1;
   }
   
   .shop .overview {
      grid-template-columns: 1fr 1fr;
   }
}
@media (max-width: 600px) {
   .grid2 .list .griditem > a {
      display: flex;
      flex-direction: column;
   }
   
   .email .text .title {
      font-size: var(--fontsize-header2);
   }
   .link-block {
      flex-direction: column;
   }
   .link-block > div {
      padding: var(--gap15);
      display: block;
   }
   .link-block a {
      display: inline;
   }
   
   .lead .overview .offer {
      flex-wrap: wrap;
   }
   .lead .overview .offer .name,
   .lead .overview .offer .cta {
      width: 100%;
      text-align: center;
   }
   .lead .overview .offer [class^="data"] {
      width: 30%;
   }
   .lead .detailed .offer [class^="data"] {
      padding: var(--gap15);
      width: 100%;
   }
   .best .overview .product {
      flex-basis: 100%;
   }
}