html, body { position:relative; margin:0; padding:0; color:#000; background-color:#FFF; font-family:sans-serif; font-size:16px; }
a { color:#000; text-decoration:none; }
a:hover { color:#66380A; text-decoration:underline; }
header { margin:0; }
header h2 { position:relative; margin:0; padding:0.5rem 0 0 0.5rem; }
header h2 img { display:block; margin:0;  }
header h2 a { background-color:#FFF; }
header h2 a:hover { color:#000; text-decoration:none; }
header nav { display:block; position:relative; clear:both; margin-top:-1.5rem; }
header nav input { display:none; }
header nav h3 { padding:0 1em; margin:0; }
header nav > ul > li { display:block; margin:0; padding:0 1em; list-style-type:none; }
header nav > ul > li > a { padding:0; }
header nav > ul > li > a:hover { color:#66380A; text-decoration:none; }
header nav > ul > li.sel > a { color:#66380A; }
header nav > ul > li figure { position:relative; margin:0; padding:0 1em; }
header nav > ul > li figure img { max-width:1em; max-height:1em; }
header nav > ul > li figcaption { position:absolute; left:4em; right:0; top:-0.6em; bottom:0; padding:0 0.3em 0 0; font-size:0.7rem; color:#66380A;/*FFC837*/ text-align:left; }

main { background-color:#ECECEC; color:#000; }
main a { color:#66380A; }

#headimage { display:block; margin:0; padding:0; width:100%; }

article { position:relative; max-width:95%; margin:0 auto -1px auto; padding:1rem 0; }
article h1 { margin:0 0 1rem 0; padding:0; font-size:2rem; }
article > h2 { font-size:1.8rem; }
article > h3 { font-size:1.6rem; }
article > h4 { font-size:1rem; }
article > h5 { font-size:0.8rem; }

footer { margin:0; padding:2rem 0 0 0; }
footer nav, #footer-sub > span { display:block; max-width:95%; margin:0 auto; padding:0; line-height:2rem; }
footer nav address { font-style:normal; }
footer nav address p { margin:0 0 1em 0; }
footer nav ul { display:block; margin:0; padding:0; }
footer nav ul li { display:block; margin:0; padding:0; list-style-type:none; }
footer nav ul li.sel a { color:#66380A; }
footer nav h4 { margin:1em 0 0 0; padding:0; }
footer nav ul ul { text-transform:none; }
#footer-sub { margin:0; padding:0.5rem 0; background-color:#3B3C3F; color:#FFF; }
#footer-sub a { color:#FFC837; }

.hidden { display:none !important; }
.sr-only { display:none; }
td.number { text-align:right; }

.block { padding:2rem 0; border-bottom:1px solid #66380A; }
article .block:last-child { padding-bottom:0; border-bottom:none; }
.blocktr .blockimage img, .blocktl .blockimage img, .blockimages .blockimage img { display:block; width:100%; }
.blocktu .blockimage img, .blocktd .blockimage img { display:block; max-width:100%; }
.blocktext h2:first-child { margin-top:0; }
#page-gallery { padding:2rem 0; }
#page-gallery ul { display:flex; flex-wrap:wrap; gap:5px; margin:0; padding:5px 0 0 0; }
#page-gallery li { display:block; width:49%; margin:0; padding:0; list-style-type:none; }
#page-gallery figure { margin:0; padding:0; }
#page-gallery li a { outline:1px solid #66380A; }
#page-gallery li a.sel { outline:1px solid #000; }
#page-gallery li img { display:block; width:100%; }
#page-gallery li figcaption { padding:0.2em 0.5em; text-align:center; font-size:0.7rem; }

/* .products { padding:0; } */
.products nav { display:block; position:relative; clear:both; }
.products nav input { display:none; }
.products nav ul { display:block; margin:0; padding:0; background-color:#7A7A7A; color:#FFF; }
.products nav ul > li { display:block; margin:0; padding:0; list-style-type:none; }
.products nav ul > li > a { display:block; padding:0 1em; }
.products nav ul > li > a { color:#FFF; }
.products nav ul > li > a:hover { text-decoration:none; background-color:#000; color:#FFF; }
.products nav ul > li.sel > a { background-color:#000; color:#FFC837; }

/* .products article { padding:0; } */
#products-list { width:100%; margin:0; padding:10px; gap:0; }
#products-list li { display:block; margin:0; padding:0; border:1px solid #000; color:#000; background-color:#FFF; list-style-type:none; }
#products-list li a { position:relative; display:block; z-index:1; }
#products-list li a:hover { text-decoration:none; z-index:2; }
#products-list li figure { margin:0; padding:0; }
#products-list li figure figcaption { display:block; margin:0; padding:0.4rem 1rem; background-color:#000; color:#FFF; }
#products-list li a:hover figure figcaption { color:#FFC837; }
#products-list li img { width:100%; }
#products-list li form { padding:0.4rem 1rem; }
#products-list li form p { margin:0; display:flex; gap:1rem; }
/* #products-list li form p input, #products-list form select { max-width:33%; } */
#products-list li form p input[type=number] { width:2.5rem; }
#products-list li > p { margin:0; padding:0.4rem 1rem; font-size:0.7rem; }

.warning-max-ingredients { background-color:#f09200; }

.product-sheet { display:flex; flex-wrap:wrap; gap:1rem; }
.product-sheet figure { margin:0; padding:0; }
.product-photos { width:100%;}
.product-photos #product-photo img { display:block; width:100%; }
.product-photos #photo-gallery { display:flex; flex-wrap:wrap; gap:5px; margin:0; padding:5px 0 0 0; }
.product-photos #photo-gallery li { display:block; width:49%; margin:0; padding:0; list-style-type:none; }
.product-photos #photo-gallery li a { outline:1px solid #66380A; }
.product-photos #photo-gallery li a.sel { outline:1px solid #000; }
.product-photos #photo-gallery li img { display:block; width:100%; }
.product-photos #photo-gallery li figcaption { padding:0.2em 0.5em; text-align:center; font-size:0.7rem; }
.product-description { width:100%; }
.product-description h1 { padding-bottom:0.2em; border-bottom:3px solid #66380A; }
.product-description h4 { margin:1rem 0 0 0; }
.product-description .sheet-data { margin:0 0 1rem 0; padding:0 0 0 1rem; }
.cart-button .button-quantity { margin:1em 0; }
.cart-button .button-add input[type=submit], .button-add a { display:block; width:100%; margin:0; padding:0.5rem 0; text-align:center; color:#000; background-color:#FFF; border:none; border-radius:5px; font-size:1rem; cursor:pointer; }

#cart-list { margin:0 0 2rem;; padding:0; border-spacing:0; border-collapse:collapse; border:none; }
#cart-list td, #cart-list th { padding:1em; }
#cart-list thead th { color:#FFF; background-color:#000; font-weight:bold; text-align:center; }
#cart-list tfoot th, #cart-list tfoot td { border-top:2px solid #000; }
#cart-list tfoot th { text-align:left; }
#cart-list tbody td { border-bottom:1px solid #000; }
#cart-list td > a > img { max-height:4em; }
#cart-list td.product-photo { width:4em; }
#cart-list td.product-photo img { display:block; width:4em; }
#cart-list td.product-name { text-align:left; }
#cart-list td.quantity { text-align:center; }
#cart-list a { color:#000; }
#cart-list td input[type=number] { width:3rem; margin-right:1rem; }
#cart-list td button { border:none; padding:0; margin:0; }
#cart-list td button img { width:1rem; }

#jars-handling { background:#FFF; }
#jars-handling > div { padding:1em; }
#jars-handling ul { display:block; margin:0; padding:0; }
#jars-handling ul > li { display:block; margin:0; padding:0; list-style:none; }
#jars-handling h4 { margin:0; padding:0; }

#available-jars ul { display:flex; gap:1%; flex-wrap:wrap; }
#available-jars li { width:4em; }
#available-jars a { display:block; position:relative; padding:1em 0; text-align:center; border:1px solid #FFF; background:#FFF url("/images/empty-jar.svg") no-repeat; background-size:auto 3em; background-position:center center; }
#available-jars a:hover { border-color:#000; text-decoration:none; }
#available-jars .sel a:before { content:">"; color:#000; display:block; position:absolute; left:0; }

#nutrition-values { border:2px solid #000; border-spacing:0; border-collapse:collapse; font-size:0.9rem; }
#nutrition-values caption { font-weight:bold; font-size:1rem; border:2px solid #000; border-bottom:1px; }
#nutrition-values td, #nutrition-values th { border-top:1px solid #000; padding:0.2em 1em; }
#nutrition-values tbody th { text-align:right; }
#nutrition-values tbody td { text-align:left; }
#nutrition-values tbody td.number { text-align:right; }

form .form-control { margin:0 0 1rem 0; }
form h3.input-label { font-size:1rem; margin:0; padding:0; }
form .input-area input[type=text],form .input-area input[type=email],form .input-area input[type=password],form .input-area input[type=tel],form .input-area select { width:95%; }

#zoom { display:flex; justify-content:center; align-items:center; position:fixed; left:0; right:0; top:0; bottom:0; margin:0; padding:0; background-color:rgba(0,0,0,1); }
#zoom img { max-width:100%; max-height:100%; border:none; }
#zoom.hidden { display:none; }

#homepage article { padding:0; }
#home-crea { position:absolute; margin:0; padding:0; left:0; right:0; bottom:3rem; height:3rem; line-height:3rem; text-align:center; }
#home-crea a { color:#FFF; background-color:#683E10; padding:0.5rem 3rem; border-radius:1rem; font-weight:bold; }
#home-crea a:hover { color:#683E10; background-color:#F39200; text-decoration:none; }

@media screen and (max-width:575px) {
}

@media screen and (min-width:576px) {
}

@media screen and (max-width:767px) {
 header nav h3 img { display:block; width:1rem; margin:0 0 0 auto; }
 header nav { min-height:2rem; }
 header nav > ul { display:none; }
 header nav > ul input:checked ~ .subnav { display:block; }
 header nav #menumob:checked ~ #menunav { display:block; max-width:95%; margin:0 auto 1rem auto; padding:0 1rem; line-height:3rem; }

 .products > h4 { width:95%; margin:0 auto 1rem auto; border:1px solid #66380A; color:#000; background-color:#FFF; }
 .products > h4 > label { display:block; margin:0.5rem 1rem; background:transparent url("/images/icons/filter-solid.svg") right center no-repeat; }
 #products-list { margin:0 -10px; }
 #products-list li { margin-bottom:10px; }
}

@media screen and (min-width:768px) {
 header nav { margin:-2.5rem 50px 0 auto; padding:0; left:50px; }
 header nav > h3 { display:none; }
 header nav > ul { display:flex; justify-content:center; margin:0 0 0 3rem; padding:0; height:3rem; line-height:3rem; }
 header nav > ul > li { margin:-1px 0 0 0; flex-grow:1; text-align:center; }
 header nav > ul > li > a { }
 header nav > ul > li figure { padding:0; text-align:center; }
 header nav > ul > li figcaption { left:0; text-align:right; }

 article { padding:2rem 0; }
 footer nav { display:flex; justify-content:left; gap:3rem; flex-wrap:wrap; }
 footer nav > address, footer nav > div { width:33%; }

 .block { display:flex; gap:3rem; }
 .blocktr { flex-direction:row-reverse;/* align-items:center;*/ }
 .blocktl { flex-direction:row;/* align-items:center;*/ }
 .blocktu { flex-direction:column; }
 .blocktd { flex-direction:column-reverse; }
 .blocktr .blocktext, .blocktl .blocktext { width:50%; }
 .blocktr .blockimage, .blocktl .blockimage, .blockimages .blockimage { width:50%; }
 #page-gallery li { width:24%; }

 .products > h4 { display:none; }
 .products { margin:0; }
 .products article { display:block; }
 .products nav { border-bottom:none; max-width:60rem; margin:0 auto; }
 .products nav ul { display:flex; justify-content:center; padding:0; height:3rem; line-height:3rem; }
 .products nav ul > li { flex-grow:1; }
 .products nav ul > li > a { text-align:center; }
 #products-list { display:flex; gap:10px; align-items:stretch; flex-wrap:wrap; }
 #products-list li { width:48%; }

 #jars-handling { display:flex; gap:1%; padding:0; width:100%; justify-content:space-between; }
 #jars-handling #available-jars { flex-grow:10; }
 #jars-handling #current-jar-content { flex-grow:1; }

 #jar-data { display:flex; gap:1%; justify-content:space-between; }

 #jar-add-ingredients { display:flex; gap:1em; }
 #jar-add-ingredients h3 { font-size:1rem; margin:0; padding:0; }
 #jar-add-ingredients ul { display:flex; gap:1em; margin:0; padding:0; }
 #jar-add-ingredients ul li { display:block; margin:0; padding:0; list-style:none; }

 .product-photos { width:49%;}
 .product-photos #photo-gallery li { width:24%; }
 .product-description { width:49%;}

 #zoom { padding:1rem; background-color:rgba(0,0,0,0.5); }
 #zoom img { border:10px solid #888; }
}

@media screen and (min-width:992px) {
 header nav { max-width:56rem; margin:-2.5rem auto 0 auto; padding:0; left:2.5rem; }
}

@media screen and (min-width:1200px) {
 header h2 { max-width:60rem; margin:0 auto; }
 article { max-width:60rem; }
 footer nav, #footer-sub > span { max-width:60rem; flex-wrap:nowrap; }

 #page-gallery li { width:19%; }

 #products-list li { width:32%; }
}

@media screen and (min-width:1400px) {
 #nav-products {  }
 .products article {  }
 #products-list li { width:23%; }
}