/* ==========================================================================
   General
   ========================================================================== */
   
/* Vars
========================================================================== */

:root {
	--color-light:#fff;
	--color-dark:#000;
	--color-darkened:rgba(0,0,0,0.5);
	--color-dark-light:#444;
	--color-bg:#b5ad89;
	--color-success:#7fd1ae;
	--color-success-dark:#499a7a;
	--color-accent:#003a16;
	--light-border:rgba(0, 0, 0, 0.05);
	--margin:3rem;
	--margin-big: calc(var(--margin) * 2);
	--margin-huge: calc(var(--margin) * 3);
	--margin-small:calc(var(--margin) / 2);
	--margin-semi: calc(var(--margin) / 1.5);
	--margin-tiny:calc(var(--margin) / 4);
	--time:500ms;
	--transition:ease;
	--scale: 1;
	--opacity:1;
	--translate:0;
	--header-height:5rem;
	--radius:1rem;
	--full-radius:10rem;
	--backdrop:blur(1rem);
}

/* Fonts
========================================================================== */


/* Resets
========================================================================== */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin:0;
	padding:0;
	border:0;
	font-size:100%;
	font:inherit;
	vertical-align:baseline;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display:block;
}

ol, ul {
	list-style:none;
	list-style-type:none;
}

ul li {
	display:inline;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield;
}

input, select, textarea, button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
	outline:none;
	color:var(--color-dark);
	font-family: 'Regular', Arial, sans-serif;
	background:none;
	border:none;
}

input {
    box-shadow: none;
	border:none;
	
}

body, html {
	margin:0;
	padding:0;
	width:100%;
	height:100%;
	overflow-x:hidden;
}

a {
	text-decoration:none;
	color:var(--color-dark);
}

a img {
	width:100%;
}

.grecaptcha-badge { 
    visibility:hidden;
}

/* Common settings
========================================================================== */

html {
	font-size:10px;
	margin:0;
	padding:0;
}

body {
    font-style: normal;
	letter-spacing:normal;
	line-height:1;
	background-color:var(--color-bg);
	color:var(--color-dark);
	position:relative;
	font-family: 'Regular', Arial, sans-serif;
	text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

.bg-container {
	background-position:center;
	background-size:cover;
}

.container {
	width:100%;
	position:relative;
}

.container .puffer {
	padding-top:calc(var(--header-height) + var(--margin-small) + (var(--margin-tiny) / 2));
	box-sizing:border-box;
	width:100%;
	background-color:var(--color-light);
	border-top: 0.1rem solid var(--light-border);
}

.next {
	width: 100%;
	background: var(--color-light); 
	color: var(--color-dark-light);
	text-align: center;
	padding: var(--margin-small);
	box-sizing:border-box;
	border-bottom: 0.1rem solid var(--light-border);
}

header {
	position: sticky;
	top: var(--margin-tiny);
	width: calc(100% - (2 * var(--margin-small)));
	margin: 0 auto;
	margin-top: var(--margin-big);
	box-sizing: border-box;
	z-index: 3;
	height: var(--header-height);
}

header .inner {
	display: grid;
	position:relative;
	z-index:4;
	grid-template-rows: max-content 0fr;
	backdrop-filter: var(--backdrop);
	background-color: color-mix(in srgb, var(--color-light) 70%, transparent);
	border-radius: var(--radius);
	overflow: hidden;
	transition:
		backdrop-filter var(--time) var(--transition),
		background-color var(--time) var(--transition),
		grid-template-rows var(--time) var(--transition);
}

header.open .inner {
	grid-template-rows: max-content 1fr;
	background-color:var(--color-light);
}

header .inner .top {
	width: 100%;
	display: flex;
	height: var(--header-height);
}

header.hidden .inner {
	background-color: transparent;
	backdrop-filter: none;
}

header.hidden .inner .top a:not(.logo) {
	opacity: 0;
	pointer-events: none;
}

header .inner .top a {
	flex: 1;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	transition: opacity var(--time) var(--transition);
	padding-top: 0.2rem;
}

header .inner .top a.logo {
	transition: opacity var(--time) var(--transition);
	padding-top: 0.3rem;
}

header .inner .top a.logo span {
	margin-left: 50%;
	transform: translateX(-50%);
}

header .inner .top a:first-child span {
	padding-left: var(--margin-small);
}

header .inner .top a:last-child span {
	margin-left: auto;
	padding-right: var(--margin-small);
}

header .inner .bottom {
	overflow: hidden;
	max-height: 0;
	transition: max-height var(--time) var(--transition);
}

header.open .inner .bottom {
	max-height: calc(100svh - var(--header-height) - (2 * var(--margin-small)));
}

header .inner .bottom .content {
	padding: var(--margin-small);
}

.teaser {
	width:calc(100% - (2 * var(--margin)));
	margin: 0 auto;
	text-align:center;
	margin-top:var(--margin-small);
}

.bubbles {
	width:calc(100% - (2 * var(--margin)));
	margin: 0 auto;
	display:flex;
	align-items:center;
	justify-content:center;
	gap:var(--margin-tiny);
	flex-wrap:wrap;
	margin-top:var(--margin);
}

.bubbles a {
	padding:var(--margin-tiny) var(--margin-small);
	padding-top:calc(var(--margin-tiny) + 0.3rem);
	box-sizing:border-box;
	border-radius:var(--full-radius);
}

.items {
	position:relative;
	z-index:2;
	display:flex;
	flex-direction:column;
	width:calc(100% - (2 * var(--margin)));
	margin: 0 auto;
	gap:var(--margin-big);
	margin-top:var(--margin-big);
	padding-bottom:var(--margin-big);
	box-sizing:border-box;
}

.items .item {
	width:100%;
}

.items .item .img {
	width:100%;
	aspect-ratio:1/1;
	border-radius:var(--radius);
}

.items .item .info {
	margin-top:var(--margin-small);
	display:flex;
	align-items:center;
	text-align:center;
	flex-direction:column;
	gap:var(--margin-tiny);
}

.bg {
	position:fixed;
	inset:0;
	background-color:var(--color-darkened);
	opacity:0;
	pointer-events:none;
	z-index:2;
	transition: opacity var(--time) var(--transition);
}

.bg.visible {
	opacity:1;
	pointer-events:auto;
}

footer {
	background-color:var(--color-light);
	width:100%;
	min-height:calc(100svh - var(--header-height) - var(--margin-small) - (var(--margin-tiny) / 2)) ;
	position:relative;
	display:flex;
	flex-direction:column;
	gap:var(--margin);
}

footer h3 {
	width: calc(100% - (2 * var(--margin)));
    text-align: center;
	margin:var(--margin-small) auto 0 auto;
}

footer .accordion {
	width: calc(100% - (2 * var(--margin)));
	margin:0 auto;
}

footer .accordion:not(.light) {
	margin:var(--margin-small) auto 0 auto;
}

footer .boxes {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: auto;
	margin:0 var(--margin);
	width: calc(100% - (2 * var(--margin)));
	gap:var(--margin-big);
}

footer .boxes .box h4 {
	display:block;
	margin-bottom:var(--margin-tiny);
}


footer .boxes .box ul li a {
	display:block;
	padding:var(--margin-tiny) 0 ;
	box-sizing:border-box;
}

footer .legal {
	padding:var(--margin-small) var(--margin);
	box-sizing:border-box;
	display:flex;
	align-items:center;
	justify-content:space-between;
	background-color:var(--color-bg);
	width:100%;
	border-top: 0.1rem solid var(--light-border);
}

footer .legal .left {
	display:flex;
	align-items:center;
}

footer .legal .right {
	display:flex;
	align-items:center;
}

footer .legal .right a {
	padding:0 calc(var(--margin-small) / 2);
}

footer .secure {
	margin:0 var(--margin);
	background-color:var(--color-success);
	border:0.1rem solid var(--color-success-dark);
	color:var(--color-light);
	width: calc(100% - (2 * var(--margin)));
	border-radius: var(--radius);
	display:flex;
	gap:var(--margin-small);
	align-items:center;
	justify-content:center;
	padding:var(--margin-small);
	box-sizing:border-box;
}

footer .secure p:last-child {
	flex:1;
}

.accordion {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--margin-tiny);
}

.accordion .item {
    display: grid;
    grid-template-rows: max-content 0fr;
    transition: grid-template-rows var(--time) var(--transition);
    background-color: var(--color-bg);
    border-radius: var(--radius);
}

.accordion.light .item {
    border: 0.1rem solid var(--light-border);
    background-color: var(--color-light);
}

.accordion .item.open {
    grid-template-rows: max-content 1fr;
}

.accordion .item button {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    padding: 0 var(--margin-semi);
}

.accordion .item button .title {
    padding: var(--margin-semi) 0;
}

.accordion .item button .toggle {
    position: relative;
    display: block;
    width: .875rem;
    height: .875rem;
}

.accordion .item button .toggle:before,
.accordion .item button .toggle:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background: currentColor;
    transform: translate(-50%, -50%);
    transition: transform var(--time) var(--transition);
}

.accordion .item button .toggle:before {
    height: 100%;
    width: .125rem;
}

.accordion .item.open button .toggle:before {
    transform: translate(-50%, -50%) rotate(90deg);
}

.accordion .item button .toggle:after {
    width: 100%;
    height: .125rem;
}

.accordion .item.open button .toggle:after {
    transform: translate(-50%, -50%) rotate(180deg);
}

.accordion .item .content {
    overflow: hidden;
}

.accordion .item .content .inner {
    padding: 0 var(--margin-semi) var(--margin-semi) var(--margin-semi);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: var(--margin);
}

/* Home
========================================================================== */

.products {
	width: 100%;
	height: 100svh;
	display: flex;
	flex-direction: column;
	overflow-y: scroll;
	scroll-snap-type: y mandatory;
}

.products .item {
	width: 100%;
	position: relative;
	height: 100svh;
	scroll-snap-align: start;
	flex: none;
}

.products .item .img {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	z-index: 1;
	background-size: cover;
	background-position: center;
}

.products .item .content {
    position: absolute;
    bottom: var(--margin-small); 
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    width: calc(100% - (2 * var(--margin)));
    text-align: center;
    padding: var(--margin);
	box-sizing:border-box;
    border-radius: 8px;
}

.products .item .content h2 {
    margin: 0 0 var(--margin-tiny) 0;
}

.products .item .content .price {
    margin-bottom: var(--margin);
}

.products .item .content .cta-button {
    padding:var(--margin-small) var(--margin);
    background-color: var(--color-light);
	box-sizing:border-box;
    border-radius: var(--full-radius);
}

/* Graphics
========================================================================== */

/* Type
========================================================================== */

.text-1 {
	font-size:2rem;
	line-height:1.5;
}

.text-2 {
	font-size:1.4rem;
}

.text-3 {
	font-size:1.1rem;
	letter-spacing:0.1rem;
}

.light {
	color:var(--color-dark-light);
}

.upper {
	text-transform:uppercase;
}

.line {
	line-height:1.3;
}

.bold, strong {
	font-family: 'Bold', Arial, sans-serif;
}

/* Animations 
========================================================================== */