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

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

:root {--font1: "Playfair Display", serif;} /* Instead of 'Abril Display' */
:root {--font2: "Montserrat", Helvetica, Arial, sans-serif;} /* Instead of 'Soleil' */

:root {--fontsize-smallest: 12px;}
:root {--fontsize-very-small: 14px;}
:root {--fontsize-smaller: 15px;}
:root {--fontsize-small: 16px;}
:root {--fontsize-body: 18px;}
:root {--fontsize-large: 22px;}
:root {--fontsize-larger: 25px;}
:root {--fontsize-largest: 32px;}
:root {--fontsize-header3: 21px;}
:root {--fontsize-header2: 27px;}
:root {--fontsize-header1: 40px;}
:root {--fontsize-title1: 62px;}
:root {--fontsize-mega: 70px;}

/* ----- Colors ----- */
:root {--color-grey-very-light: #acacac;}
:root {--color-grey-lighter: #dedede;}
:root {--color-grey-light: #b1b1b1;}
:root {--color-grey: #cacaca;}
:root {--color-grey-darker: #898989;}
:root {--color-white: #fff;}
:root {--color-white-cream: #f4f4f4;}
:root {--color-black: #000;}
:root {--color-black-light: #1b1d20;}
:root {--color-black-lighter: #323436;}
:root {--color-pink-sand: #f9eee7;}
:root {--color-yellow: #ffe600;}
:root {--color-yellow-light: #fff6e2;}
:root {--color-orange: #ffc200;}
:root {--color-pink: #f893c7;}
:root {--color-pink-light: #feeee7;}
:root {--color-green: #70cfbe;}
:root {--color-green-light: #CCEBE6;}
:root {--color-blue-dusty: #8a9ec6;}
:root {--pink-gradient: linear-gradient(60deg,#ffe8d9,#ffcdcc); }

/* ----- Icons ----- */
.menu-icon .icon {background-image: url(/files/icon/menu_a.svg);}
/*#menu .search .icon {background-image: url(/files/icon/search_c.svg);}*/
.search .icon {background-image: url(/files/icon/search_b_white.svg);}
.social .items .x .icon {background-image: url(/files/icon/new_x_a_white.svg);}
.social .items .facebook .icon {background-image: url(/files/icon/facebook_39_white.svg);}
.social .items .tiktok {display: none;}
.social .items .rss .icon {background-image: url(/files/icon/rss_12_white.svg);}
.social .items .linkedin {display: none;}
.social .items .youtube {display: none;}
.social .items .pinterest {display: none;}
.social .items .mail {display: none;}
.social .items .instagram {display: none;}
.social .items {
   gap: var(--gap15);
}
.social .items .item {
   margin: 0;
   border: 2px solid rgba(255,255,255,0.4);
   border-radius: 50%;
   padding: 7px;
}
.social .items .item .icon {
   opacity: 0.4;
}

/* ----- Border Radius ----- */
:root {--border-radius-small: 10px;}
:root {--border-radius-mini: 5px;}

/* ----- Gap ----- */
:root {--gap: 45px;}
: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: 1230px;}
:root {--width-site2: 800px;}

/* Links */
a {
   /*color: black;*/
   text-decoration: none;
}
.single-body a:hover {
   text-decoration: underline;
}

.article {
   margin: 0;
}

.image.col img, 
.single-header .featured-image img, 
.article img, 
.site-categories-images img, 
.freebie img,
.lead .overview .offer .logo img {
   display: block;
}

/* ################################################################# VARIOUS ################################################################# */
* {
    box-sizing: border-box;
}
body {
   background-color: var(--color-white-cream);
   font-family: var(--font2);
   font-size: var(--fontsize-body);
   line-height: 1.5;
   text-rendering: optimizeSpeed;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6 {
   line-height: 1.2;
   font-family: var(--font1);
   margin: 0;
   font-weight: 600;
}
h1 {
   font-size: var(--fontsize-mega);
   line-height: 1;
   color: var(--color-black-light);
}
h2 {
   font-size: var(--fontsize-header2);
}
h3 {
   font-size: var(--fontsize-header3);
   font-weight: 600;
}
h4 {
   font-size: var(--fontsize-body);
   font-weight: 700;
   font-family: var(--font2);
}

.page .mobile .logo {
   width: auto;
}
header .logo a,
.page .mobile .logo a {
   text-decoration: none;
   color: black;
   font-family: var(--font2);
}
header .logo span,
.page .mobile .logo span {
   display: block;
   font-size: 1.5em;
   font-weight: 600;
   text-align: center;
   text-transform: uppercase;
}

.header-normal-1 .site-categories .items,
.header-up-1 .inner,
.index .section > .inner ,
.directory .content,
.lead .content,
#main .single .post,
#main .single .partner,
#main .single .best,
#main .single .shop,
#main .archive .content,
footer .desktop .inner {
   width: 100%;
   max-width: var(--width-site);
   margin-right: auto;
   margin-left: auto;
   padding: 0 var(--gap20);
}
#main .page .content {
   max-width: var(--width-site2);
   margin-right: auto;
   margin-left: auto;
   padding: 0 var(--gap20);
}

.header-normal-1 {
   background: var(--pink-gradient);
}
.header-normal-1 .inner {
   display: flex;
   flex-direction: column;
   align-items: center;
   position: relative;
}
.header-normal-1 .site-categories {
   width: 100%;
   background-color: white;
}
.header-normal-1 .site-categories .element-title {
   display: none;
}
.header-normal-1 .site-categories .items {
   justify-content: center;
}
.header-normal-1 .site-categories .items a {
   font-family: var(--font2);
   font-size: var(--fontsize-smaller);
}
.header-normal-1 .site-categories .items a .title {
   padding: var(--gap15) var(--gap25);
}
.header-normal-1 .logo {
   margin-top: var(--gap10);
   margin-bottom: var(--gap10);
}
.header-normal-1 .logo img {
   height: 100%;
   max-height: 100px;
}
.header-normal-1 .search {
   display: flex;
   align-items: center;
   position: absolute;
   top: 11px;
   right: 10px;
}
.header-normal-1 .search input {
   padding: var(--gap5) 0;
   color: var(--color-white);
   font-size: var(--fontsize-smaller);
   font-family: var(--font2);
   border: 0;
   border-bottom: 2px solid var(--color-black-lighter);
}

.heading {
   font-size: var(--fontsize-header2);
   font-weight: 700;
   letter-spacing: -0.03em;
   margin-bottom: var(--gap30);
}

.grid {
   margin: 0;
}

.section3,
.section7 {
   padding: var(--gap) 0;
}
.section2 {
   background-color: var(--color-pink-sand);
   padding: var(--gap) 0;
}
.section4,
.section5,
.section6 {
   background-color: var(--color-pink-sand);
   padding-top: var(--gap);
}
.section6 {
   padding-bottom: var(--gap);
}

.grid4 {
   margin-top: var(--gap);
   grid-template-rows: repeat(12, auto);
   row-gap: 0;
}
.grid4 .text {
   display: flex;
   flex-direction: column;
}
.grid4 .category,
.grid4 .name,
.grid6 .category,
.grid6 .name,
.grid2 .name,
.side.right .name,
.grid13 .name,
.lead .overview .cta,
.lead .detailed .label,
.single-header .category,
.single-header .author,
.single-body .related .category {
   display: block;
   color: var(--color-grey-darker);
   font-size: var(--fontsize-smaller);
   text-transform: uppercase;
   font-weight: 400;
}
.grid4 .category,
.grid6 .category {
   order: 1;
}
.grid4 .title,
.grid6 .title {
   order: 2;
   font-size: var(--fontsize-header3);
   font-weight: 700;
   line-height: 1.05;
   margin: var(--gap5) 0 var(--gap20);
}
.grid4 .name,
.grid6 .name {
   order: 3;
   font-size: var(--fontsize-very-small);
}
.grid4 .griditem:first-child a,
.grid6 .griditem:nth-child(2) a {
   display: flex;
   align-items: flex-start;
   background-color: white;
}
.grid4 .griditem:first-child .image {
   order: 2;
   width: 55%;
   position: relative;
}
.grid6 .griditem:nth-child(2) .image {
   order: 1;
   width: 55%;
   position: relative;
}
.grid4 .griditem:first-child .image img,
.grid6 .griditem:nth-child(2) .image img {
   height: 400px;
}
.grid4 .griditem:first-child .text,
.grid6 .griditem:nth-child(2) .text {
   width: 45%;
   position: relative;
   z-index: 99;
}
.grid4 .griditem:first-child .text,
.grid6 .griditem:nth-child(2) .text {
   margin: var(--gap20);
}
.grid6 .griditem:nth-child(2) .text {
   order: 2;
   text-align: right;
}
.grid4 .griditem:first-child .title,
.grid6 .griditem:nth-child(2) .title {
   text-shadow: 0.05em 0.05em 0 white;
}
.grid4 .griditem:nth-child(2) .image,
.grid6 .griditem:first-child .image {
   margin-bottom: var(--gap25);
}
.grid4 .griditem:first-child .text .intro ,
.grid6 .griditem:nth-child(2) .text .intro {
   display: block;
   order: 3;
   text-shadow: 0.05em 0.05em 0 white;
   margin-bottom: var(--gap15);
   line-height: 1.4em;
   font-size: var(--fontsize-smaller);
}
.grid6 {
   margin-bottom: var(--gap);
}
.grid6 .article {
   padding-top: var(--gap);
}

.grid2,
.grid13 {
   grid-template-rows: repeat(12, auto);
   row-gap: 0;
}
.grid2 .sub,
.grid2 .name,
.grid13 .sub,
.side.right .sub,
.side.right .name,
.single-body .related .intro {
   display: block;
}
.grid2 .title,
.side.right .title {
   font-family: var(--font1);
   font-weight: 600;
   font-size: var(--fontsize-large);
   line-height: 1.1em;
}
.grid2 .sub,
.grid13 .sub,
.side.right .sub,
.single-body .related .intro {
   font-size: var(--fontsize-smaller);
   margin: var(--gap5) 0;
   line-height: 1.3em;
}
.grid2 .name,
.side.right .name {
   color: var(--color-black-light);
}
.grid2 .article a,
.side.right .article a {
   display: flex;
   gap: var(--gap20);
}
.grid2 .article .image {
   flex-basis: 110px;
}
.grid2 .article .image img {
   height: 100px;
   width: 100px;
}
.grid2 .text {
   flex-basis: calc(100% - 110px);
}

.wide.left {
   display: flex;
   flex-direction: column;
   gap: var(--gap);
   width: 72%;
}

.side.right {
   width: 28%;
   display: flex;
   flex-direction: column;
   gap: var(--gap);
}
.side.right .article a {
   flex-direction: column;
}
.side.right .article .image,
.side.right .article .image img {
   height: 190px;
}

.grid13 .text {
   margin-top: var(--gap20);
}
div:not(.single-bottom):not(.content) > .section3 .grid13 .sub {
   display: none;
}
.grid13 .title,
.single-body .related .title {
   font-size: var(--fontsize-body);
   font-weight: 700;
   line-height: 1.2em;
}
div:not(.single-bottom):not(.content) > .section3 .grid13 .title {
   font-size: var(--fontsize-larger);
   text-align: center;
   margin-bottom: var(--gap10);
}
div:not(.single-bottom):not(.content) > .section3 .grid13 .article .image {
   overflow: hidden;
   height: 250px;
   width: 250px;
}
.grid13 .article .image img,
.single-body .related .image img {
   height: 200px;
}
div:not(.single-bottom):not(.content) > .section3 .grid13 .article .image img {
   height: 100%;
   width: 100%;
}
.grid13 .name {
   color: var(--color-black-light);
}
div:not(.single-bottom):not(.content) > .section3 .grid13 .name {
   text-align: center;
}

.link-block {
   display: flex;
   flex-wrap: wrap;
   justify-content: flex-start;
   gap: var(--gap15);
   padding: var(--gap50) 0;
}
.link-block > div {
   flex: 1 1 calc(50% - var(--gap15) * 2);
   border: 3px solid var(--color-green);
   display: flex;
   align-items: center;
   gap: var(--gap5);
   font-weight: 500;
   font-family: var(--font1);
   font-weight: bold;
   padding: 0 var(--gap15);
}
.link-block > div:hover {
   background-color: var(--color-black);
}
.link-block > div:hover a {
   color: var(--color-white);
}
.link-block > div > a:first-child {
   line-height: 1.2em;
   padding: var(--gap10) 0;
}

/* Archive */
.directory {
   background-color: var(--color-pink-sand);
}
.directory h1 {
   text-transform: uppercase;
   text-align: center;
}
.directory .overview {
   gap: var(--gap20);
   margin-top: var(--gap20);
   padding-bottom: var(--gap20);
}
.directory .overview .article a {
   font-size: var(--fontsize-small);
}
.directory .overview .article a .image {
   margin-bottom: var(--gap15);
   height: 190px;
}
.directory .overview .article a .text {
   font-weight: 700;
}

.lead {
   background-color: var(--color-white-cream);
}
.lead .content {
   padding: var(--gap40) var(--gap20);
}
.lead .overview {
   max-width: var(--width-site);
   margin: var(--gap30) auto;
   background-color: white;
   border: 1px solid var(--color-grey-light);
   border-radius: 10px;
}
.lead .overview .number,
.lead .overview .label,
.lead .overview .description,
.lead .overview .stars,
.lead .overview .law,
.lead .overview .list,
.lead .overview .data3,
.lead .overview .name,
.lead .detailed .number,
.lead .detailed .name {
   display: none; 
}
.lead .overview .offer {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   height: auto;
   padding: var(--gap15);
   border-bottom: 1px solid var(--color-grey-light);
}
.lead .overview .offer .logo {
   height: 50px;
   display: flex;
   align-items: center;
   justify-content: center;
}
.lead .overview .offer .logo img {
   max-height: 100%;
   width: auto;
   max-width: 140px;
}
.lead .overview .offer [class^="data"] {
   text-align: center;
}
.lead .overview .cta {
   text-align: right;
   font-size: var(--fontsize-very-small);
   background: var(--color-green);
   color: white;
   padding: var(--gap10) var(--gap15);
   border-radius: 20px;
   text-align: center;
}
.lead .overview .cta:after {
   content: "\21DB";
   margin-left: 5px;
}

.lead .detailed {
   display: flex;
   flex-wrap: wrap;
   gap: var(--gap);
   justify-content: space-between;
}
.lead .detailed .offer {
   background-color: white;
   padding: var(--gap20);
   flex: 1 1 calc(50% - var(--gap) / 2);
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   border-radius: var(--border-radius-small);
   border: 1px solid var(--color-grey-light);
}
.lead .detailed .label {
   order: 1;
   letter-spacing: 0.1em;
   text-transform: uppercase;
}
.lead .detailed .offer .logo {
   order: 2;
   margin: var(--gap20) 0;
   background-color: var(--color-white);
   max-width: 350px;
   height: 100px;
   padding: var(--gap15);
}
.lead .detailed .offer .logo img {
   height: auto;
   width: auto;
   max-height: 100%;
}
.lead .detailed .offer .stars {
   order: 2;
}
.lead .detailed .description {
   order: 3;
   font-size: var(--fs-18);
   line-height: 1.4em;
   margin: var(--gap20) 0;
}
.lead .detailed .label,
.lead .detailed .logo, 
.lead .detailed .description,
.lead .detailed .offer .stars,
.lead .detailed .offer .law {
   width: 100%;
   text-align: center;
}
.lead .detailed .label {
   color: black;
}
.lead .detailed .offer [class^="data"] {
   order: 4;
   width: calc(100% / 3);
}
.lead .detailed .offer .list {
   order: 5;
   width: 100%;
}
.lead .detailed .offer .list ul {
   list-style-type: none;
   margin: 0;
   padding: 0;
}
.lead .detailed .offer .list ul {
   display: flex;
}
.lead .detailed .offer [class^="data"] span,
.lead .detailed .offer .list ul li {
   line-height: 1.25em;
   text-align: center;
   font-size: var(--fontsize-smaller);
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: 500;
   padding: var(--gap5) 0;
   display: block;
}
.lead .detailed .offer .list ul li {
   border-top: 0;
   width: calc(100% / 3);
}
.lead .detailed .offer .data2,
.lead .detailed .offer .list ul li:nth-child(2) {
   width: calc((100% / 3) - 2px);
}
.lead .detailed .offer .cta {
   order: 6;
   letter-spacing: 0.1em;
   text-transform: uppercase;
   font-weight: bold;
   border: 2px solid var(--color-white);
   margin: var(--gap20) auto;
   font-size: var(--fontsize-very-small);
   background: var(--color-green);
   color: white;
   padding: var(--gap10) var(--gap15);
   border-radius: 20px;
   text-align: center;
}
.lead .detailed .offer .law {
   order: 7;
   font-size: var(--fontsize-very-small);
}

.single,
.page,
.archive {
   background-color: var(--color-white-cream);
}
.single article {
   padding: var(--gap20) 0;
   display: grid;
   grid-template-columns: repeat(16, 1fr);
}
.single .single-above,
.single .single-left,
.single .single-footer,
.single .single-header .featured-image .credits {
   display: none;
}
.single-header {
   grid-column: 1 / span 10;
   grid-row: 1 / span 1;
   display: flex;
   flex-direction: column;
   box-shadow: 0 3px 3px 0 var(--color-grey);
   padding: var(--gap25);
   line-height: 30px;
   background: white;
}
.single-header .category {
   display: block;
   order: 1;
   color: var(--color-black-light);
   font-size: var(--fontsize-small);
}
.single-header .title {
   order: 2;
}
.single-header .text {
   display: block;
   order: 3;
   margin: var(--gap15) 0;
   font-weight: 500;
}
.single-header .author {
   display: flex;
   order: 4;
   color: var(--color-black-light);
   font-size: var(--fontsize-small);
   align-items: center;
   gap: var(--gap10);
}
.single-header .author .avatar {
   display: block;
   order: 1;
   overflow: hidden;
   height: 30px;
   width: 30px;
}
.single-header .author .avatar img {
   height: 100%;
   width: 100%;
}
.single-header .author .name {
   order: 2;
}
.single-header .featured-image {
   order: 5;
   margin: var(--gap15) 0;
}
.single-body {
   grid-column: 1 / span 10;
   grid-row: 2 / span 1;
   
   box-shadow: 0 3px 3px 0 var(--color-grey);
   margin-top: calc((var(--gap) + 5px)* -1);
   padding: 0 var(--gap25) var(--gap25);
   line-height: 30px;
   background: white;
}
.related .articles .article:nth-child(1n+3) {
   display: none;
}
.single-body .related .article a {
   display: flex;
   flex-direction: column;
}
.single-body .related .article a:hover {
   text-decoration: none;
}
.single-body .related .title {
   margin-top: var(--gap20);
}
.single-body .related .heading {
   margin-bottom: var(--gap20);
}
.single-body .related .category {
   order: 2;
}
.single-right {
   grid-column: 12 / span 5;
   grid-row: 2 / span 2;
}
.single-bottom {
   grid-column: 1 / span 10;
   grid-row: 3 / span 1;
   box-shadow: 0 3px 3px 0 var(--color-grey);
   margin-top: calc((var(--gap) + 5px)* -1);
   padding: var(--gap25);
   line-height: 30px;
   background: white;
}
.single-bottom .section3 {
   padding-top: var(--gap20);
}
.single-bottom .section3 .grid13,
.single-body .related .articles {
   display: flex;
   flex-wrap: wrap;
   gap: var(--gap30);
   justify-content: space-between;
}
.single-bottom .section3 .grid13 .griditem,
.single-body .related .articles .article {
   flex: 1 1 calc(50% - var(--gap30) / 2);
}
.articles5 {
   background-color: white;
   box-shadow: 0 0 3px 0 var(--color-grey);
   padding: var(--gap20);
}
.articles5 .article:not(:first-child) {
   margin-top: var(--gap20);
   padding-top: var(--gap20);
}
.articles5 .article a {
   display: flex;
   align-items: flex-start;
   gap: var(--gap20);
}
.articles5 .text {
   display: flex;
   align-items: flex-start;
   gap: var(--gap20);
   flex: 1 1 calc(100% - var(--gap20) - 70px);
   flex-direction: row;
}
.articles5 .title {
   order: 2;
   font-family: var(--font1);
   font-weight: 800;
   line-height: 1.1em;
   flex: 1 1 calc(100% - var(--gap20) - 30px);
}
.articles5 .image {
   order: 3;
   width: 70px;
   flex: 1 1 70px;
}
.articles5 .image img {
   width: 70px;
   height: 70px;
}
.articles5 .number {
   order: 1;
   flex: 1 1 30px;
   display: flex;
   color: var(--color-white);
   font-size: var(--fontsize-small);
   font-weight: 700;
   background-color: black;
   width: 30px;
   height: 30px;
   justify-content: center;
   align-items: center;
}

blockquote {
   border-top: 1px solid var(--color-black-light);
   border-bottom: 1px solid var(--color-black-light);
   padding: var(--gap40) 0;
   margin: var(--gap) 0;
   line-height: 1.4em;
   position: relative;
   text-align: center;
   font-size: var(--fontsize-large);
}
blockquote:before {
   content: "\275D";
   position: absolute;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: var(--fontsize-header3);
   top: 0;
   left: 50%;
   width: 55px;
   height: 55px;
   background-color: var(--color-white);
   border: 1px solid #121212;
   transform: translateX(-50%) translateY(-50%);
}

table {
   border-collapse: collapse;
   margin: var(--gap) 0;
}
table th,
table td {
   padding: var(--gap10);
   line-height: 1.2em;
}
table th {
   text-align: left;
   border-bottom: 2px solid var(--color-grey-lighter);
}
table th:not(:last-child),
table td:not(:last-child) {
   border-right: 1px solid var(--color-grey-lighter);
}
table tr:not(:last-child) {
   border-bottom: 1px solid var(--color-grey-lighter);
}

ol {
   list-style: lower-alpha;
}
ul li,
ol li {
   margin-bottom: var(--gap10);
}

.consider h2,
.types h2,
.brands h2,
.faq h2 {
   margin-top: 1em;
   margin-bottom: 0.5em;
   font-size: var(--fontsize-largest);
}
.faq h3,
.consider h3,
.types h3,
.brands h3 {
   color: var(--color-black-light);
   font-size: var(--fontsize-large);
}
.faq h3 + p,
.consider h3 + p,
.types h3 + p,
.brands h3 + p {
   margin-top: 0;
}

/* Best */
.best .overview {
   display: flex;
   gap: var(--gap20);
   flex-wrap: wrap;
   padding-bottom: var(--gap);
}
.best .overview h2 {
   width: 100%;
}
.best .overview .product {
   flex: 1 1 calc(50% - var(--gap20) / 2 - calc(var(--gap15) * 3 + 120px));
   font-family: var(--font1);
   gap: var(--gap10);
   display: flex;
   flex-direction: column;
   background-color: var(--color-white);
   padding: var(--gap15);
   position: relative;
   padding-left: calc(var(--gap15) * 2 + 120px);
}
.best .overview .product .image,
.best .overview .product .summary,
.best .overview .product .price,
.best .overview .product .cta,
.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,
.best .detailed .product .cta {
   display: block;
}
.best .overview .product .title {
   font-weight: 500;
   line-height: 1.2em;
}
.best .overview .product .image {
   width: 120px;
   position: absolute;
   top: var(--gap10);
   left: var(--gap10);
}
.best .overview .product .image img {
   height: auto;
   width: 150px;
}
.best .overview .product .summary {
   font-size: var(--fontsize-smaller);
   line-height: 1.2em;
   font-weight: 300;
}
.best .overview .product .price {
   color: var(--color-red);
   font-weight: 500;
}
.product .cta a {
   color: black;
   font-size: var(--fontsize-smaller);
   text-transform: uppercase;
   font-weight: 700;
}
.best .detailed {
   display: flex;
   flex-direction: column;
   gap: var(--gap);
   margin-bottom: 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%;
   font-family: var(--font1);
   padding-bottom: var(--gap);
}
.best .detailed .product {
   border-bottom: 1px solid var(--color-black-lighter);
}
.best .detailed .product .image {
   grid-column: 1 / span 1;
   grid-row: 1 / span 4;
   padding: 5%;
   background-color: var(--color-white);
   display: flex;
   justify-content: center;
   align-items: center;
}
.best .detailed .product .image img {
   width: 100%;
   height: auto;
}
.best .detailed .product .title {
   grid-column: 2 / span 1;
   grid-row: 2 / span 1;
   font-size: var(--fontsize-largest);
   font-weight: 600;
   display: flex;
   align-items: center;
}
.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: black;
   color: var(--color-white);
   font-weight: 500;
   font-size: var(--fontsize-small);
   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-white);
}
.best .detailed .product .highlights ul li {
   display: flex;
   flex-direction: column;
   font-size: var(--fontsize-smaller);
   line-height: 1.2em;
   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);
   color: var(--color-black-light);
   font-size: var(--fontsize-largest);
}
.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;
}
.best .detailed .product .cta {
   grid-column: 2 / span 1;
   grid-row: 8 / span 1;
   padding-top: var(--gap20);
}
.best .others h2 {
   margin-bottom: 0px;
}
.best .others {
   display: flex;
   flex-direction: column;
   gap: var(--gap15);
   align-items: flex-start;
}
.best .others .product {
   font-family: var(--font1);
   display: flex;
   flex-direction: column;
   align-items: flex-start;
}
.best .others .product .label {
   display: block;
   font-size: var(--fontsize-very-small);
   font-weight: 500;
   letter-spacing: 0.14px;
   color: black;
   text-transform: uppercase;
   line-height: 1.1em;
}
.best .others .product .title a:before {
   content: "\002B";
   margin-right: var(--gap5);
}

.shop .overview {
   grid-template-columns: repeat(3, 1fr);
   gap: var(--gap15);
   margin-bottom: var(--gap);
}
.shop .overview .product {
   display: flex;
   flex-direction: column;
   align-items: center;
   padding: var(--gap10) var(--gap10) var(--gap80);
   text-align: center;
   position: relative;
   font-family: var(--font2);
   line-height: 1.2em;
   gap: var(--gap15);
   background-color: var(--color-white);
}
.shop .overview .product a {
   color: var(--color-black);
}
.shop .overview .product .price,
.shop .overview .product .cta,
.shop .overview .product .rating1 {
   display: block;
}
.shop .overview .product .image {
   order: 1;
   height: 160px;
}
.shop .overview .product .image img {
   display: block;
   height: 100%;
   width: auto;
}
.shop .overview .product .rating1 {
   order: 2;
}
.shop .overview .product > .title {
   order: 3;
   font-weight: 600;
}
.shop .overview .product .price,
.shop .overview .product .cta {
   position: absolute;
}
.shop .overview .product .price {
   bottom: 45px;
}
.shop .overview .product .cta {
   bottom: 10px;
}
.shop .overview .product .cta a {
   font-size: var(--fontsize-smaller);
   font-weight: 700;
   color: black;
}
.shop .overview .product a:hover {
   text-decoration: none;
}
.shop .overview .product .cta a:after {
   content: "\2192";
   margin-left: var(--gap10);
}

footer {
   overflow: hidden;
   padding: 0 0 var(--gap15);
}
footer .inner {
   display: flex;
   flex-wrap: wrap;
}
footer .email {
   border-bottom: 1px solid var(--color-black-lighter);
   width: 100vw; 
   max-width: 100vw;
   margin-left: calc((100vw - 100%) / 2* -1);
   margin-right: calc((100vw - 100%) / 2* -1);
   padding-left: calc((100vw - 100%) / 2);
   order: 1;
}
.email .text {
   display: flex;
   flex-wrap: wrap;
   gap: var(--gap20);
   padding: var(--gap60) 0;
   max-width: var(--width-site);
}
.email .name-field,
.email .above-email-field,
.email .checkbox,
.email .law,
footer .list7 .element-title,
footer .social .element-title,
footer .social .text,
footer .copyright .medium,
footer .copyright .long {
   display: none;
}
.email .title {
   font-size: var(--fontsize-header2);
   font-weight: 700;
   color: black;
   width: 100%;
}
.email .description {
   width: 100%;
}
.email .fields {
   width: 100%;
   max-width: 600px;
}
.email .fields input {
   padding: var(--gap25);
   background-color: transparent;
   font-size: var(--fontsize-small);
   font-family: var(--font1);
   border-bottom: 2px solid var(--color-black-lighter);
   width: 100%;
   max-width: calc(100% - var(--gap25) * 2);
}
.email .cta {
   display: flex;
   color: white;
   font-family: var(--font1);
   font-weight: 700;
   font-size: var(--fontsize-largest);
   background-color: var(--color-black);
   display: flex;
   justify-content: center;
   align-items: center;
   min-width: 220px;
}
footer .list7 {
   order: 2;
   display: flex;
   gap: var(--gap10);
   margin-top: var(--gap5);
}
footer .list7 a {
   color: black;
   font-size: var(--fontsize-smaller);
}
footer .social {
   order: 3;
   margin-left: auto;
   margin-top: var(--gap15);
}
footer .copyright {
   order: 4;
   color: black;
   font-size: var(--fontsize-smaller);
   width: 100%;
   margin-top: calc(var(--gap15) * -1);
}

/* ----- Cookies ----- */
#cookies-overlay, #cookies {
   /*display: block !important;*/
}
#cookies-overlay {
   background-color: var(--color-black);
}
#cookies { 
   background-color: var(--color-white); 
   padding: var(--gap20) var(--gap30);
   font-family: var(--font1);
   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(--gap20);
   align-items: center;
   font-size: var(--fontsize-smaller);
   line-height: 1.4em;
   font-weight: 400;
}
#cookies .short {
   font-weight: 700;
}
#cookies .long1 {display: block;}
#cookies .long2 {display: none;}

#cookies .settings {
   padding: var(--gap10) 0;
   font-weight: 500;
   margin-top: var(--gap10);
   margin-right: auto;
   color: black;
}
#cookies .settings:hover {
   text-decoration: underline;
}
#cookies .accept,
#cookies .deny {
   color: var(--color-black);
   border: 2px solid var(--color-black);
   padding: var(--gap10) var(--gap20);
   font-weight: 600;
   text-align: center;
   margin-top: var(--gap10);
}
#cookies .accept:hover,
#cookies .deny:hover {
   background-color: var(--color-black);
   color: var(--color-white);
}

@media (max-width: 1200px) {
   .header-normal-1 .site-categories .items a .title {
      padding: var(--gap15) var(--gap10);
   }
   .header-normal-1 .site-categories {
      justify-content: flex-start;
   }
   .header-normal-1 .site-categories .items {
      margin: 0;
      justify-content: flex-start;
   }
   .grid4 .griditem:first-child .title, .grid6 .griditem:nth-child(2) .title {
      font-size: var(--fontsize-header2);
   }
   .wide.left,
   .side.right {
      width: 100%;
   }
   div:not(.single-bottom):not(.content) > .section3 .grid13 .article .image img {
      transform: none;
   }
   div:not(.single-bottom):not(.content) > .section3 .grid13 .article .image {
      height: 150px;
   }
   
   .articles5 {
      padding: var(--gap15);
   }
   .articles5 .text {
      gap: var(--gap10);
      flex: 1 1 calc(100% - var(--gap10) - 70px);
   }
   .articles5 .title {
      font-weight: 700;
      font-size: var(--fontsize-smaller);
      flex: 1 1 calc(100% - var(--gap10) - 30px);
   }
   
   .best .overview .product {
      padding-left: var(--gap15);
      flex-basis: calc(50% - var(--gap20) / 2);
      align-items: center;
      text-align: center;
      justify-content: space-between;
   }
   .best .overview .product .image {
      position: relative;
      top: auto;
      left: auto;
   }
   .best .overview .product .title {
      height: 75px;
      display: flex;
      align-items: center;
   }
   .best .overview .product .price {
      margin-top: auto;
   }
   
   .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;
      padding: 0;
   }
}
@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;
   }
   
   .grid4 .griditem:first-child {
      padding-right: 0;
      border: 0;
   }
   .grid6 .griditem:nth-child(2) {
      padding-left: 0;
      border: 0;
   }
   
   div:not(.single-bottom):not(.content) > .section3 .grid13 {
      row-gap: var(--gap40);
   }
   div:not(.single-bottom):not(.content) > .section3 .grid13 a {
      display: flex;
      flex-direction: column;
      align-items: center;
   }
   
   .directory .overview {
      grid-template-columns: 1fr 1fr;
   }
   
   .single article {
      display: flex;
      flex-direction: column;
   }
   .single-right {
      margin-bottom: var(--gap30);
   }
   .articles5 .article a,
   .articles5 .text {
      align-items: center;
   }
   
   .single-body > table,
   .page .content > table {
      max-width: 100%;
      overflow-x: auto;
      display: block;
   }
}
@media (max-width: 767px) {
   .header-normal-1 .search {
      display: none;
   }
   .header-normal-1 .site-categories .items a {
      font-size: var(--fontsize-very-small);
   }
   .header-normal-1 .logo {
      margin: var(--gap30);
   }
   .grid4 .griditem:first-child a, .grid6 .griditem:nth-child(2) a {
      flex-direction: column;
   }
   .grid4 .griditem:first-child .text, .grid6 .griditem:nth-child(2) .text,
   .grid4 .griditem:first-child .image,
   .grid6 .griditem:nth-child(2) .image {
      margin: 0;
      width: 100%;
   }
   .link-block > div {
      flex-basis: 100%;
   }
   
   .lead .overview .offer {
      flex-wrap: wrap;
      row-gap: var(--gap5);
      display: flex;
      justify-content: center;
      column-gap: var(--gap15);
   }
   .lead .overview .offer .logo,
   .lead .overview .offer .name,
   .lead .overview .offer .cta,
   .lead .detailed .offer .list,
   .lead .detailed .offer .description {
      width: 100%;
      text-align: center;
   }
   .lead .overview .offer .logo img {
      margin: 0 auto;
   }
   
   .lead .detailed .offer {
      flex-basis: 100%;
   }
   
   .shop .overview {
      grid-template-columns: 1fr 1fr;
   }
}