@font-face { font-family: Lora; src: url('src/fonts/lora.woff2') format('woff2'), url('src/fonts/lora.woff') format('woff'); font-display: swap; }

:root {
	--brand: 				rgb(85 105 85 / 100%);
	--dark: 				rgb(35 35 35 / 100%);
	--light: 				rgb(245 235 230 / 100%);
	--label: 				rgb(230 210 180 / 100%);
	--label-alt:			rgb(230 210 180 / 75%);
	--banana-jam:			rgb(160 95 50 / 100%);
	--bilumbi-pickle:		rgb(145 45 35 / 100%);
	--guava-jelly:			rgb(185 65 75 / 100%);
	--pineapple-jam:		rgb(65 105 85 / 100%);
	--apple-cinnamon-jelly:	rgb(210 35 85 / 100%);
	--orange-fig-jam:		rgb(135 65 35 / 100%);
	--page:					var(--dark);
	}

*, *::before, *::after { margin: 0; padding: 0; border: 0; box-sizing: border-box; outline : none; }
html { scroll-behavior: smooth; font-size: 62.5%; }

body { min-height: 100vh; background: var(--dark); color: var(--light); font-family: Lora, serif; font-size: 1.6rem; line-height: 1; background-attachment: fixed; background-position: center center; background-repeat: no-repeat; background-size: cover; }
a { color: var(--brand); text-decoration: none; transition: 0.25s; }
a:hover, a:active, a:focus { text-decoration: none; color: var(--dark); }
figure { padding-bottom: 2rem;  }
img { width: 100%; height: auto; }
p { padding-bottom: 2rem; line-height: 1.25; }

ul { list-style: none; padding-bottom: 2rem; }
menu { list-style: none; }
li {  }

h1, h2, h3, h4, h5, h6 { font-weight: normal; }
h1 { font-size: 2.8rem; text-transform: uppercase; }
h2 { font-size: 2.4rem; text-transform: uppercase; }

.background { width: 100vw; height: 100vh; position: fixed; z-index: -1; }
.background img { width: 100%; height: 100%; object-fit: cover; }
.tab { display: block; width: 8rem !important; border-radius: 0; margin: 0 auto; background: var(--label-alt); }
figure.stretch { width: calc(100% + 4rem); margin-left: -2rem; }


/***  .header ***/

.header { height: calc(100vh - 18rem); max-width: 100vw; display: flex; flex-direction: column; justify-content: space-between; align-items: center; }
.header nav { background: var(--dark); width: 100%; padding: 1rem; }
.header nav ul { display: flex; flex-direction: row; justify-content: space-around; align-items: center; max-width: 32rem; margin: auto; text-transform: uppercase; font-size: 1.6rem; padding-bottom: 0; }
.header nav ul li { list-style: none; }
.header nav a { padding: .5rem; color: var(--label); }
.header nav a:hover, .header nav a:active, .header nav a:focus { color: var(--light); }
.header a { display: block; }
.header a span { display: block; }
.header div a { background: var(--label-alt);  }
.header .logo { border-radius: 50%; width: 20rem; height: 20rem; padding: 2rem; }
.header .logo:hover, .header .logo:active, .header .logo:focus { padding: 1rem; }
.header .logo-graphic { fill: var(--brand); }
.header .logo-text { fill: var(--dark); }
.header .notch { width: 8rem; height: 2rem; display: block; background: transparent; margin: -.9rem auto 0 auto; }
.header .notch svg { fill: var(--label-alt); }
.header .tab { height: 2rem; }

/*** .main  ***/

#main { padding: 0 2rem 4rem 2rem; background: var(--page); color: var(--dark); }
#main > * { width: 100%; margin: 0 auto; }
#main .tab { height: 4rem; }
#main header { background: var(--label); padding: 2rem; border-radius: 1rem; margin-bottom: 4rem; max-width: 40rem; margin: 0 auto 4rem auto; text-align: center; }
#main header h1, #main header h2 { text-align: center; width: 100%; }
#main header h1 img { max-width: 24rem; }
#main header > span {  }
#main header h2 { font-style: italic; padding-bottom: 0; font-size: 2rem; text-transform: none; margin: 2rem auto 0 auto; }
#main main aside { position: sticky; top: 0; z-index: 20; padding: 2rem; max-width: 40rem; margin: 0 auto 4rem auto; background: var(--dark); border-radius: 0 0 1rem 1rem; color: var(--light); text-align: center; }
#main main aside ul { display: flex; flex-direction: row; justify-content: space-around; }
#main main aside .buy { display: inline-block; margin: 1rem auto; background: var(--brand); color: var(--light); border-radius: 2rem; padding: 1rem 2rem; }
#main main aside .buy:hover, #main main aside .buy:active, #main main aside .buy:focus  { color: var(--dark); background: var(--label); }
#main main aside .buy span { }
#main main .content { line-height: 1.25; }

#main main { min-height: 40vh; }
#main main section { max-width: 40rem; margin: 0 auto 4rem auto; background: var(--label); border-radius: 1rem; padding: 2rem; }
#main main section p { line-height: 1.5; }
#main main section div { margin: 0 auto 4rem auto; width: 100%; padding: 4rem 2rem 2rem 2rem; background: var(--label); border-radius: 1rem; }
#main main h2 { text-align: center; margin-bottom:4rem; color: var(--light); }
#main main small { text-transform: uppercase; }
#main footer { padding: 2rem; background: var(--label); border-radius: 1rem; text-align: center; max-width: 40rem; }
#main footer h3 { text-align: center; text-transform: uppercase; font-size: 2.4rem; margin-bottom: 2rem; }
#main footer img { border-radius: .5rem; }
ul.also { display: flex; flex-direction: row; justify-content: space-around; align-items: center; flex-wrap: wrap; }
ul.also li { display: flex; flex-direction: column; width: 50%; max-width: 12.5rem; }

body.page.store #main footer { max-width: 64rem; }
body.page.store #main footer ul { gap: 2rem;; }

#footer { padding: 3rem; margin-top: 5rem; background: var(--dark); text-align: center; color: var(--light); }
#footer a { color: var(--label); }
#footer a:hover, #footer a:active, #footer a:focus  { color: var(--light); }
#footer a.logo { display: block; margin-bottom: 2rem; }
#footer .logo svg { width: 12rem; height: 12rem; }
#footer .logo svg .logo-text { fill: var(--light); }
#footer .logo svg .logo-graphic { fill: var(--brand); }
#footer .fssai svg { width: 4rem; height: auto; fill: var(--light); display: block; margin: 1rem auto 0 auto;  }
#footer ul.socials { display: flex; flex-direction: row; justify-content: center; }
#footer ul.socials li { margin: 0 1rem; }
#footer ul.socials a { display: block; padding: 1rem; border-radius: 1rem; line-height: 0; }
#footer ul.socials a:hover, #footer ul.socials a:active, #footer ul.socials a:focus  { background: var(--brand); }
#footer ul.socials li img { width: 3.2rem; }
#footer nav menu { width: 24rem; display: grid; grid-auto-columns: 1fr; grid-template-columns: 1fr 1fr; grid-template-rows: auto; gap: 1em 1em; grid-template-areas: ". ."; margin: auto; padding: 2rem 0; }
#footer nav menu li { text-align: left; }
#footer nav menu li:nth-child(odd) { text-align: right }
a.go { display: block; height: 6rem; width: 6rem; text-align: center; margin: 1rem auto; }
a.go span { display: block; height: 6rem; width: 6rem; margin: 0 auto; padding: 1rem; background-color: var(--brand); border-radius: 50%; }
a.go:hover span, a.go:active span, a.go:focus span { background: var(--light); }

.section {  }

.section.home {  }
.section.home #main header { padding-top: 4rem; }
.section.home #main header h1 { display: grid; place-items: center;  margin-bottom: 0; padding-bottom: 2rem; text-transform: none; }
.section.home #main main { background: transparent; }
.section.home #main main section { padding: 0; background: transparent; }
.section.home #main main .description { font-style: italic; color: var(--light); text-align: center; font-size: 2rem;}
.section.home #main main h3 img { max-width: 24rem; }
.section.home #main footer { }

.section.store  {  }
.section.store #main main section.products { padding: 0; background: transparent; }
.section.store .content h3 { text-align: center; text-transform: uppercase; padding-bottom: 1rem; }

.page #main main section { padding-top: 4rem; }

.page.store #main header { margin-bottom: 0; border-radius: 1rem 1rem 0 0; }
.page.store #main main section { }
.page.store footer ul { padding-bottom: 0; }

.page.contact {  }

.page.about {  }

.page.shipping {  }

.page.payment {  }
.page.payment #main main { text-align: center; }
.page.payment #main main img { max-width: 24rem; }


.cards { display: grid; grid-template-columns: 1fr; grid-template-rows: auto; grid-auto-columns: 1fr; gap: 2rem 2rem; grid-auto-flow: row; grid-template-areas: "."; text-align: center; padding: 0; background: transparent;  }
.card { background: var(--label); border-radius: 1rem; margin-bottom: 2rem; }
.card img { border-radius: 1rem 1rem 0 0; }
.card h3 img { width: 60%; height: auto; }
.card p { padding: 0 2rem 2rem 2rem; }

.gallery { padding-bottom: 4rem; width: 100%; max-width: 40rem; z-index: 10; margin: 0 auto; aspect-ratio: 10/13 auto; }
.gallery .viewer-wrap img { border-radius: 1rem; }
.gallery .thumbnails-wrap { border-radius: 1rem; }
.gallery .thumbnails-wrap button { border: none; }

@media screen and (min-width: 640px) {
	ul.cards { grid-template-columns: 1fr 1fr 1fr; }
	.section.home #main main section.description { max-width: 64rem; }
	.section.home #main main section.products { max-width: 64rem; }
	.section.home #main main section.content { max-width: 64rem; }
	.section.store #main main section.products { max-width: 64rem; }
	.page.about #main main section.content { max-width: 64rem; }
	.page.store #main main section.content { max-width: 64rem; }
}

@media screen and (min-width: 720px) {
	.section.home #main main section.products { max-width: 72rem; }
	.section.store #main main section.products { max-width: 72rem; }
}