/* Generated by less 2.5.1 */
/*
File Name: styles.css
Date: 05/28/19
Programmer: Sarah Bayley
*/
/* Allow this stylesheet to refer to the code in var.less */
/*
File Name: var.less
Date: 05/28/19
Programmer: Sarah Bayley
*/
/* VARIABLES */
/* color palette */
/* font sizes */
/* font families */
/* miscellaneous, repeated values */
/* MIXINS */
.btn-basic {
  padding: calc(9px) 18px;
  text-align: center;
  background-color: #845f00;
  color: #fffaf0;
  font-family: "Josefin Sans", sans-serif;
  font-size: 1em;
  font-weight: 100;
  transition: all 0.3s ease-in-out;
}
.btn-basic:hover {
  background-color: #4e1507;
  transition: all 0.3s ease-in-out;
}
.btn-basic i {
  color: rgba(255, 250, 240, 0.6);
}
.btn-red {
  background-color: #4e1507;
  font-variant-caps: all-small-caps;
}
.btn-red:hover {
  background-color: #845f00;
}
.form-basic {
  padding: 18px;
}
.form-basic p {
  font-family: "Josefin Sans", sans-serif;
  font-weight: 100;
}
.form-basic fieldset {
  padding-top: 18px;
  font-family: "Josefin Sans", sans-serif;
  font-weight: 100;
}
.form-basic fieldset input,
.form-basic fieldset textarea,
.form-basic fieldset select {
  opacity: .7;
  font-family: "Josefin Sans", sans-serif;
  font-weight: 300;
  font-size: 0.65em;
  box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.4);
}
.form-basic fieldset textarea {
  height: 8em;
}
.form-basic button {
  padding: calc(9px) 18px;
  text-align: center;
  background-color: #845f00;
  color: #fffaf0;
  font-family: "Josefin Sans", sans-serif;
  font-size: 1em;
  font-weight: 100;
  transition: all 0.3s ease-in-out;
  background-color: #4e1507;
  font-variant-caps: all-small-caps;
  margin: 18px auto;
}
.form-basic button:hover {
  background-color: #4e1507;
  transition: all 0.3s ease-in-out;
}
.form-basic button i {
  color: rgba(255, 250, 240, 0.6);
}
.form-basic button:hover {
  background-color: #845f00;
}
.form-block {
  display: block;
  text-align: left;
  /* display labels above each fieldset */
}
.form-block fieldset {
  display: block;
  width: 100%;
  margin: auto;
}
.form-block fieldset label,
.form-block fieldset .label {
  display: block;
  margin-bottom: calc(9px);
  width: 100%;
}
.form-block fieldset input,
.form-block fieldset textarea,
.form-block fieldset select {
  display: block;
  padding: calc(9px);
  margin-left: 0;
  width: 100%;
}
.form-block fieldset select {
  /* keep month and day selectors on same line by alloting each so much space */
  display: inline-block;
}
.form-block fieldset select:nth-of-type(1) {
  width: 61%;
}
.form-block fieldset select:nth-of-type(2) {
  width: 35%;
  margin-left: 0;
}
.form-block button {
  width: 100%;
}
.centered-content {
  text-align: center;
}
.centered-content fieldset {
  text-align: left;
}
.form-flex {
  text-align: center;
}
.form-flex fieldset {
  /* display labels and inputs next to each other */
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin: auto;
}
.form-flex fieldset label,
.form-flex fieldset .label {
  padding-right: calc(9px);
  width: 30%;
}
.form-flex fieldset input,
.form-flex fieldset textarea,
.form-flex fieldset select {
  padding: calc(9px);
  width: 70%;
}
.form-flex fieldset select {
  /* divide space leftover from label between month and day selectors */
}
.form-flex fieldset select:nth-of-type(1) {
  width: 40%;
}
.form-flex fieldset select:nth-of-type(2) {
  width: 25%;
  margin-left: 4%;
}
.form-flex button {
  width: 50%;
}
/* SMALLEST MOBILE UP STYLES */
html {
  /* don't display elements intended for larger resolutions */
  /* for any elements that need to use flex */
  /* create container for responsive underlining (border) for links */
  /* create area to place background image for big-btn so big-btn can have a background color that can be transitioned on hover */
}
html .tablet-up {
  display: none;
}
html .flex-container {
  display: flex;
}
html .flex-link {
  display: inline-flex;
}
html .flex-link a {
  /* create underline initial state at 0 width */
  /* expand underline on hover/active */
}
html .flex-link a::after {
  content: "";
  display: block;
  margin: -2px auto 0 auto;
  width: 0;
  height: 0;
  border-top: solid 1px rgba(78, 21, 7, 0.5);
  transition: all 0.3s ease-in-out;
}
html .flex-link a:hover::after,
html .flex-link a:active::after {
  width: 100%;
  transition: all 0.3s ease-in-out;
}
html .btn-container {
  background-position: center;
  /* keep image proportionate on resize */
  background-size: cover;
  background-repeat: no-repeat;
  /* keep background image confined to big-btn */
  background-clip: content-box;
}
html .big-btn {
  /* keep buttons same height */
  display: flex;
  /* vertiaclly center text */
  align-items: center;
  /* horizontally center text */
  justify-content: center;
  padding: calc(36px);
  text-align: center;
  height: 100%;
  /* bg mask */
  background-color: rgba(78, 21, 7, 0.75);
  color: #fffaf0;
  /* for contrast against background */
  text-shadow: 1px 1px 2px black, -1px -1px 2px black, -1px 1px 2px black, 1px -1px 2px black;
  border: solid 1px #845f00;
  font-family: "Josefin Sans", sans-serif;
  font-size: 1.2em;
  font-weight: 300;
  font-variant-caps: all-small-caps;
  transition: all 0.5s ease-in-out;
}
html .big-btn:hover {
  /* change bg mask */
  background-color: rgba(78, 21, 7, 0.3);
  transition: all 0.5s ease-in-out;
}
html .border {
  /* shrink and compress vertically for better fit with layout */
  transform: scale(0.7, 0.5);
}
html body {
  font-family: "Cormorant Upright", serif;
  font-size: 22px;
  font-weight: 300;
}
html body #wrapper {
  /* make room for fixed header to sit */
  padding-top: 120px;
  background-color: #fffaf0;
  /* styles for main headings and back-to-shop link in product page main heading area */
  /* styles for secondary headings and back-to-shop link in product page secondary heading area */
  /* give paragraph and list texts some leg room */
  /* outermost section generates side padding for mobile */
  /* shadow under header when user starts to scroll */
  /* flex container for main and nav */
}
html body #wrapper h1,
html body #wrapper .back-to-shop {
  color: white;
  font-size: 1.7em;
  position: absolute;
  bottom: 0;
  margin-bottom: 18px;
  font-family: "Josefin Sans", sans-serif;
  font-weight: 100;
}
html body #wrapper h2,
html body #wrapper .product-heading {
  font-family: "Cormorant Upright", serif;
  font-size: 1.4em;
  font-weight: 300;
  padding-bottom: 18px;
  color: #4e1507;
}
html body #wrapper h2 a,
html body #wrapper .product-heading a {
  color: #4e1507;
}
html body #wrapper h3 {
  font-size: 1.2em;
}
html body #wrapper p {
  margin-bottom: 18px;
}
html body #wrapper p:last-of-type {
  margin-bottom: 0;
}
html body #wrapper p,
html body #wrapper ul {
  line-height: 1.4;
}
html body #wrapper .outer {
  padding: 0 18px 0 18px;
}
html body #wrapper form {
  /* for hiding certain labels from sighted visitors, with other text or normal visual cues doing this job */
}
html body #wrapper form .hidden {
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
}
html body #wrapper .teahouse-pic {
  /* keep image proportionate */
  object-fit: cover;
  height: auto;
}
html body #wrapper header {
  /* allow header columns to sit inline and keep their proportions */
  display: flex;
  /* make header follow user as they scroll */
  position: fixed;
  width: 100%;
  height: 120px;
  /* scoot header up into wrapper top padding */
  margin-top: calc(-120px);
  /* slight transparency */
  background-color: rgba(255, 250, 240, 0.95);
  background-image: url(../images/texture1.png);
  background-repeat: no-repeat;
  background-size: cover;
  border-bottom: solid 1px #845f00;
  text-align: center;
  padding: 18px;
  /* keep header above other page elements */
  z-index: 2;
}
html body #wrapper header .header-col {
  /* make all three header columns resize with constant proportions */
  display: flex;
  /* vertically center items in header */
  align-items: center;
  /* logo area */
  /* site name area */
  /* hamburger button area (basket button on tablet-up) */
}
html body #wrapper header .header-col:nth-of-type(1) {
  left: 0;
  width: 10%;
  /* keep item to left against header padding */
  justify-content: flex-start;
}
html body #wrapper header .header-col:nth-of-type(1) svg {
  height: 50px;
  width: 50px;
  fill: #845f00;
  stroke: #845f00;
  stroke-width: 0;
}
html body #wrapper header .header-col:nth-of-type(2) {
  width: 80%;
  /* center text horizontally */
  justify-content: center;
  padding: 0 18px;
}
html body #wrapper header .header-col:nth-of-type(2) a {
  color: #845f00;
  font-size: 1.6em;
  font-variant-caps: small-caps;
}
html body #wrapper header .header-col:nth-of-type(3) {
  right: 0;
  width: 10%;
  /* keep item against header padding*/
  justify-content: flex-end;
}
html body #wrapper header .header-col:nth-of-type(3) #hamburger-btn {
  cursor: pointer;
}
html body #wrapper header .header-col:nth-of-type(3) #hamburger-btn .hamburger-lines {
  width: 38px;
  height: 0;
  padding: 0;
  /* form each hamburger line */
  border: solid 1px rgba(255, 255, 255, 0.7);
  /* soften edges of lines */
  border-radius: 10%;
  border-color: #845f00;
  transition: all 0.5s ease-in-out;
}
html body #wrapper header .header-col:nth-of-type(3) #hamburger-btn .hamburger-lines:nth-of-type(1),
html body #wrapper header .header-col:nth-of-type(3) #hamburger-btn .hamburger-lines:nth-of-type(2) {
  margin-bottom: 12px;
}
html body #wrapper header .header-col:nth-of-type(3) #hamburger-btn .hamburger-x {
  transition: .3s;
  /* turn first line clockwise to form part of x */
  /* turn last line counter-clockwise to form other part of x */
  /* hide middle line */
}
html body #wrapper header .header-col:nth-of-type(3) #hamburger-btn .hamburger-x:first-of-type {
  transform: rotate(45deg);
  transform-origin: 10% 300%;
}
html body #wrapper header .header-col:nth-of-type(3) #hamburger-btn .hamburger-x:last-of-type {
  transform: rotate(-45deg);
  transform-origin: 0% -300%;
}
html body #wrapper header .header-col:nth-of-type(3) #hamburger-btn .hamburger-x:nth-of-type(2) {
  border-color: rgba(0, 0, 0, 0);
  transition: .1s;
}
html body #wrapper .header-scroll {
  box-shadow: 0 2px 4px 2px rgba(0, 0, 0, 0.1);
}
html body #wrapper div {
  /* slide navbar all the way into view and make completely visible when user clicks hamburger button */
}
html body #wrapper div nav {
  position: fixed;
  width: 100%;
  background-color: #5f4e00;
  background-image: url(../images/texture2.png);
  height: 100%;
  /* hide off screen until user taps hamburger button */
  left: -100%;
  font-family: "Josefin Sans", sans-serif;
  font-weight: 100;
  /* invisible initial state to make transition look smoother and more gentle */
  opacity: 0;
  /* keep above other page elements */
  z-index: 2;
  transition: all 0.5s ease-in-out;
  /* my basket link container in navbar */
  /* mobile mailing list form is at bottom of page; navbar mailing form is for larger displays */
}
html body #wrapper div nav ul {
  /* put link list itmes in rows of equal height */
  display: grid;
}
html body #wrapper div nav ul li {
  border-bottom: solid 1px rgba(255, 250, 240, 0.5);
  text-align: center;
}
html body #wrapper div nav ul li a {
  /* make link fill entire box for easier tapping */
  display: block;
  width: 100%;
  height: 100%;
  padding: 18px;
  color: #fffaf0;
}
html body #wrapper div nav .current-page {
  background-color: #845f00;
}
html body #wrapper div nav .current-page a {
  /* better contrast against bg color */
  color: white;
}
html body #wrapper div nav .nav-basket {
  /* the flex/justify/align trio for easy centering */
  display: flex;
  justify-content: center;
  align-items: center;
  /* make button stand a bit on its own away from other links */
  margin-top: calc(45px);
}
html body #wrapper div nav .nav-basket a {
  padding: calc(9px) 18px;
  text-align: center;
  background-color: #845f00;
  color: #fffaf0;
  font-family: "Josefin Sans", sans-serif;
  font-size: 1em;
  font-weight: 100;
  background-color: #4e1507;
  font-variant-caps: all-small-caps;
  display: block;
  padding: calc(12px) 18px;
  transition: all 0.3s ease-in-out;
}
html body #wrapper div nav .nav-basket a:hover {
  background-color: #4e1507;
  transition: all 0.3s ease-in-out;
}
html body #wrapper div nav .nav-basket a i {
  color: rgba(255, 250, 240, 0.6);
}
html body #wrapper div nav .nav-basket a:hover {
  background-color: #845f00;
}
html body #wrapper div nav .nav-basket a i {
  /* space apart from text */
  margin-left: calc(9px);
  /* match size of smallcapped text */
  font-size: .75em;
}
html body #wrapper div nav .mailing {
  display: none;
}
html body #wrapper div .nav-opened {
  left: 0;
  opacity: 1;
  transition: all 0.5s ease-in-out;
}
html body #wrapper div main {
  /* container for filter button and menu */
}
html body #wrapper div main .main-top {
  position: relative;
  height: 180px;
  /* keep buttons/inputs/headings inside this area in line with page side padding */
  padding: 18px;
  /* image always fills container */
  background-size: cover;
  /* best view in most images i've found are a little above the halfway point vertically */
  background-position: 50% 40%;
  background-repeat: no-repeat;
}
html body #wrapper div main p a:link,
html body #wrapper div main ul a:link,
html body #wrapper div main p a:visited,
html body #wrapper div main ul a:visited {
  color: #4e1507;
  /* color change, especially on thin weights, not enough to perceive links easily; heavier weight makes them more obvious without being too distracting */
  font-weight: 300;
}
html body #wrapper div main .sample-container {
  position: relative;
  /* stretch over normal page padding to create a more distinct, anchored-looking section */
  margin: 0 calc(-18px);
  /* keep sample list edges aligned with rest of page padding */
  padding: calc(9px);
  background-color: #fffaf0;
  /* for a very, very subtle distinction of this area from rest of page */
  background-image: url(../images/texture2.png);
  /* further distinguish this area from rest of page */
  border-bottom: solid 1px #845f00;
  /* ul containing list items */
}
html body #wrapper div main .sample-container h2 {
  margin: 0 calc(9px);
}
html body #wrapper div main .sample-container .samples {
  width: 100%;
  /* make list easy to make responsive at different resolutions */
  display: flex;
  /* flex: 0 0 #% isn't good enough for flex to force non-fitting elements onto next line; it needs to be told to wrap the items that don't fit */
  flex-wrap: wrap;
}
html body #wrapper div main .sample-container .samples li {
  /* fullwidth */
  flex: 0 0 100%;
  padding: calc(9px);
  /* need container to use flex on children */
}
html body #wrapper div main .sample-container .samples li .sample-wrapper {
  display: flex;
  width: 100%;
  /* set height of list items */
  height: 40px;
  float: left;
  border: solid 1px #845f00;
  box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease-in-out;
  /* make bg color appear within double border gap */
  background-clip: border-box;
  /* wrapper to use to make image flex and to determine its size */
}
html body #wrapper div main .sample-container .samples li .sample-wrapper .thumb-wrapper {
  /* image thumnail to take up 15% of sample list item area */
  flex: 0 0 15%;
  height: 100%;
  /* no matter size of image, keep within its wrapper (which is aligned with li space) */
  overflow: hidden;
}
html body #wrapper div main .sample-container .samples li .sample-wrapper .thumb-wrapper img {
  width: 100%;
  height: 100%;
  /* always fill container without becoming disproportionate */
  object-fit: cover;
}
html body #wrapper div main .sample-container .samples li .sample-wrapper .sample-link {
  background-color: #fffaf0;
  color: #4e1507;
  font-weight: 300;
  /* center link text vertically */
  display: flex;
  align-items: center;
  /* don't be too squished or too far from thumnail */
  padding: calc(9px);
  /* make clickabe area take up container */
  width: 100%;
  height: 100%;
  transition: all 0.3s ease-in-out;
}
html body #wrapper div main .sample-container .samples li .sample-wrapper .sample-link:hover {
  background-color: #845f00;
  /* better contrast against new bg color */
  color: white;
  transition: all 0.3s ease-in-out;
}
html body #wrapper div main .sample-container .samples li .sample-wrapper .sample-link:hover .arrow-2 {
  /* transitions 2nd arrow into view */
  color: white;
  transition: all 0.3s ease-in-out;
}
html body #wrapper div main .sample-container .samples li .sample-wrapper .sample-link:hover .arrow-3 {
  /* transition 3rd arrow into view right after 2nd to complete a subtle "hey this way" effect */
  color: white;
  transition: all 0.5s ease-in-out;
}
html body #wrapper div main .sample-container .samples li .sample-wrapper .sample-link .arrow-2,
html body #wrapper div main .sample-container .samples li .sample-wrapper .sample-link .arrow-3 {
  /* invisible starting state for extra arrows */
  color: transparent;
  transition: all 0.3s ease-in-out;
}
html body #wrapper div main .filter {
  /* doesn't actually need a height and wants to cover other areas (including links) when kept at its initial height */
  height: 0;
  /* opened state of filter menu */
}
html body #wrapper div main .filter .filter-btn {
  padding: calc(9px) 18px;
  text-align: center;
  background-color: #845f00;
  color: #fffaf0;
  font-family: "Josefin Sans", sans-serif;
  font-size: 1em;
  font-weight: 100;
  transition: all 0.3s ease-in-out;
  background-color: #fffaf0;
  color: #845f00;
  /* slightly match faded look of search bar but not too faded to read easily */
  opacity: .9;
  border: solid 1px #845f00;
  font-size: 0.65em;
  font-weight: 300;
  font-variant-caps: all-small-caps;
}
html body #wrapper div main .filter .filter-btn:hover {
  background-color: #4e1507;
  transition: all 0.3s ease-in-out;
}
html body #wrapper div main .filter .filter-btn i {
  color: rgba(255, 250, 240, 0.6);
}
html body #wrapper div main .filter .filter-btn:hover {
  color: #fffaf0;
}
html body #wrapper div main .filter .filter-btn:hover i {
  /* seems blocks of color stand out more, even look more opaque, than text with that color; 1/2 opacity for icons next to 100 weighted or really small text (3/4 opacity when next to 300 weighted and normal-sized text) makes them look more even */
  color: rgba(255, 250, 240, 0.5);
  transition: all 0.3s ease-in-out;
}
html body #wrapper div main .filter .filter-btn i {
  color: rgba(132, 95, 0, 0.75);
  margin-left: calc(9px);
  font-size: .75em;
  transition: all 0.3s ease-in-out;
}
html body #wrapper div main .filter .filter-menu {
  /* allow z-index to take effect */
  position: relative;
  /* don't show menu until user clicks filter button */
  visibility: hidden;
  /* stretch to padding of #main-top */
  width: 100%;
  /* transparent initial state to smooth out transition into view */
  background-color: rgba(255, 250, 240, 0);
  border: solid 1px #4e1507;
  text-align: center;
  /* start position for transition; otherwise contents are still visible */
  z-index: 0;
  padding: 18px;
  transition: all 0.3s ease-in-out;
  /* make small text easier to see */
  font-weight: 300;
}
html body #wrapper div main .filter .filter-menu ul {
  /* allow for easy wrapped columns (though technically it'll just form rows, meaning list items are probably not read in intended order) */
  display: flex;
  flex-wrap: wrap;
  /* keep columns items aligned */
  text-align: left;
  margin-bottom: 0;
  /* fill in box when user clicks item */
}
html body #wrapper div main .filter .filter-menu ul li {
  /* fit 1 category column */
  flex: 0 0 100%;
  /* stop breaking hyphenated words just because you're running a little low on room (looking at you, "non-caffeinated") */
  word-break: keep-all;
  margin-bottom: calc(9px);
  /* make items appear clickable on hover */
  cursor: pointer;
  /* add boxes in front of each item to be filled in when user clicks */
}
html body #wrapper div main .filter .filter-menu ul li::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  height: 1em;
  width: 1em;
  margin-right: 18px;
  background-color: transparent;
  border: 1px solid black;
  transition: .1s;
}
html body #wrapper div main .filter .filter-menu ul .checked::before {
  background-color: #4e1507;
  transition: .1s;
}
html body #wrapper div main .filter .filter-menu button {
  padding: calc(9px) 18px;
  text-align: center;
  background-color: #845f00;
  color: #fffaf0;
  font-family: "Josefin Sans", sans-serif;
  font-size: 1em;
  font-weight: 100;
  transition: all 0.3s ease-in-out;
  margin-top: 18px;
  /* wow that button text looks really big so near this smaller list text; let's tone it down a bit */
  font-size: .9em;
  font-variant-caps: all-small-caps;
}
html body #wrapper div main .filter .filter-menu button:hover {
  background-color: #4e1507;
  transition: all 0.3s ease-in-out;
}
html body #wrapper div main .filter .filter-menu button i {
  color: rgba(255, 250, 240, 0.6);
}
html body #wrapper div main .filter .visible {
  visibility: visible;
  background-color: rgba(255, 250, 240, 0.95);
  /* stay above h1 */
  z-index: 1;
  transition: all 0.3s ease-in-out;
}
html body #wrapper div main #search {
  display: flex;
  float: right;
}
html body #wrapper div main #search input {
  width: 180px;
  /* allow search box to shrink a little when running up against filter button in certain resolutions */
  min-width: 100px;
  padding: calc(9px);
  /* for a softer look against bg image */
  opacity: .9;
  border: solid 1px #845f00;
  font-family: "Josefin Sans", sans-serif;
  font-size: 0.65em;
  font-weight: 300;
  box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
}
html body #wrapper div main #search button {
  padding: calc(9px) 18px;
  text-align: center;
  background-color: #845f00;
  color: #fffaf0;
  font-family: "Josefin Sans", sans-serif;
  font-size: 1em;
  font-weight: 100;
  transition: all 0.3s ease-in-out;
  font-size: 0.65em;
  float: right;
}
html body #wrapper div main #search button:hover {
  background-color: #4e1507;
  transition: all 0.3s ease-in-out;
}
html body #wrapper div main #search button i {
  color: rgba(255, 250, 240, 0.6);
}
html body #wrapper div main ul {
  margin-bottom: 18px;
  /* use more practical-looking font listed info */
  font-family: "Josefin Sans", sans-serif;
  font-size: .8em;
  font-weight: 100;
}
html body #wrapper div main .teahouse-info {
  text-align: center;
}
html body #wrapper div main .teahouse-info figure {
  /* make map fullwidth */
  flex: 0 0 100%;
  /* make edge of map easier to see against light bg */
  border: solid 1px rgba(132, 95, 0, 0.5);
}
html body #wrapper div main .teahouse-info figure iframe {
  /* make map fill its container */
  height: 100%;
  width: 100%;
}
html body #wrapper div main .product {
  /* add to cart button */
}
html body #wrapper div main .product h2 {
  /* force product names to not wrap to next line and mess up the layout alignment in larger resolutions; instead make them trail into ellipses if they must, even though the text doesn't have a container/parent with a fixed height */
  display: table;
  table-layout: fixed;
  width: 100%;
  white-space: nowrap;
}
html body #wrapper div main .product h2 a {
  display: table-cell;
  overflow-x: hidden;
  text-overflow: ellipsis;
}
html body #wrapper div main .product img {
  /* Remove gap below image caused by container font-size */
  margin-bottom: -0.2em;
  width: 100%;
  height: 300px;
  /* keep image proportionate while filling any prescribed deimensions */
  object-fit: cover;
}
html body #wrapper div main .product .product-glance {
  position: relative;
  padding: calc(9px) 0;
  font-size: 1.2em;
  /* use practical/detail font to let the user not keep giving their attention to this repeated text */
}
html body #wrapper div main .product .product-glance .unit {
  font-family: "Josefin Sans", sans-serif;
  font-size: 0.65em;
  font-weight: 300;
}
html body #wrapper div main .product button {
  padding: calc(9px) 18px;
  text-align: center;
  background-color: #845f00;
  color: #fffaf0;
  font-family: "Josefin Sans", sans-serif;
  font-size: 1em;
  font-weight: 100;
  transition: all 0.3s ease-in-out;
  position: absolute;
  top: 0;
  /* stay to right side */
  right: 0;
  height: 100%;
  font-size: .7em;
  /* inline-block wrapper to keep "composite" icon together */
}
html body #wrapper div main .product button:hover {
  background-color: #4e1507;
  transition: all 0.3s ease-in-out;
}
html body #wrapper div main .product button i {
  color: rgba(255, 250, 240, 0.6);
}
html body #wrapper div main .product button .icon-wrapper {
  display: inline-block;
}
html body #wrapper div main .product button .icon-wrapper i {
  float: right;
  font-size: 1em;
  color: rgba(255, 250, 240, 0.6);
}
html body #wrapper div main .product button .icon-wrapper .fa-plus {
  font-size: .5em;
}
html body #wrapper div main .product .product-details {
  position: relative;
  padding: calc(9px) 0;
  /* cut off item details in gallery page to create a sort of preview of each product and make all gallery items stay alligned (same height) in larger resolutions */
  height: 7.8em;
  /* keep "preview" text from overflowing prescribed dimensions */
  overflow: hidden;
  transition: all 0.5s ease-in-out;
}
html body #wrapper div main .product .view-more {
  display: block;
  position: relative;
  width: 100%;
  padding: 18px;
  text-align: center;
  background-color: rgba(255, 250, 240, 0.9);
  color: #4e1507;
  font-weight: 400;
  transition: all 0.3s ease-in-out;
  /* create fade-like style where "view item details" button meets preview text (as alternative to ellipses which can only easily be applied to single lines of text) */
}
html body #wrapper div main .product .view-more::before {
  content: "";
  display: block;
  position: absolute;
  top: -10px;
  left: 0;
  width: 100%;
  /* just a short gradient */
  height: 10px;
  /* the fadey part */
  background-image: linear-gradient(to top, #ddddaa, #fffaf0 5%, rgba(255, 250, 240, 0.1));
}
html body #wrapper div main .product .view-more:hover,
html body #wrapper div main .product .view-more:active {
  background-color: #845f00;
  /* better contrast against new bg color */
  color: white;
  transition: all 0.3s ease-in-out;
  /* transition 2nd arrow into view */
  /* transition 3rd arrow into view right after 2nd to complete a subtle "hey this way" effect */
}
html body #wrapper div main .product .view-more:hover .arrow-2,
html body #wrapper div main .product .view-more:active .arrow-2 {
  color: white;
  transition: all 0.3s ease-in-out;
}
html body #wrapper div main .product .view-more:hover .arrow-3,
html body #wrapper div main .product .view-more:active .arrow-3 {
  color: white;
  transition: all 0.5s ease-in-out;
}
html body #wrapper div main .product .view-more .arrow-2,
html body #wrapper div main .product .view-more .arrow-3 {
  /* hide arrows until hover */
  color: transparent;
  transition: all 0.3s ease-in-out;
}
html body #wrapper div main .product-page {
  /* style product page name (product name) for being in the same place user saw it while in the shop page */
  /* on smaller devices, add-to-cart button looks better when opposite price */
}
html body #wrapper div main .product-page h1 {
  position: relative;
  margin-top: 18px;
  margin-bottom: 0;
  padding-bottom: 0;
  color: #4e1507;
}
html body #wrapper div main .product-page button {
  right: 0;
  margin-left: 18px;
}
html body #wrapper div main .product-page button .fa-plus {
  margin-left: calc(9px);
}
html body #wrapper div main .product-page .product-details {
  margin-top: 18px;
  /* override preview height when on actual product page */
  height: auto;
  border-top: solid 1px black;
}
html body #wrapper div main .partners img {
  height: 180px;
  /* keep image proportionate */
  object-fit: cover;
  /* optimal default positioning for uncropped pics that may include people; ensures view is of face area when part of pic is hidden to fit dimensions */
  object-position: 50% 20%;
}
html body #wrapper div main .partners a {
  /* practical font for non-main-copy (partner website promotional links) */
  font-family: "Josefin Sans", sans-serif;
  font-size: .9em;
  /* external link icon */
}
html body #wrapper div main .partners a i {
  margin-left: .3em;
  font-size: .5em;
  vertical-align: super;
  color: rgba(78, 21, 7, 0.9);
}
html body #wrapper div main .contact {
  padding: 18px;
  display: block;
  text-align: left;
  /* display labels above each fieldset */
  background-image: url(../images/texture2.png);
  background-color: #5f4e00;
  color: #fffaf0;
}
html body #wrapper div main .contact p {
  font-family: "Josefin Sans", sans-serif;
  font-weight: 100;
}
html body #wrapper div main .contact fieldset {
  padding-top: 18px;
  font-family: "Josefin Sans", sans-serif;
  font-weight: 100;
}
html body #wrapper div main .contact fieldset input,
html body #wrapper div main .contact fieldset textarea,
html body #wrapper div main .contact fieldset select {
  opacity: .7;
  font-family: "Josefin Sans", sans-serif;
  font-weight: 300;
  font-size: 0.65em;
  box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.4);
}
html body #wrapper div main .contact fieldset textarea {
  height: 8em;
}
html body #wrapper div main .contact button {
  padding: calc(9px) 18px;
  text-align: center;
  background-color: #845f00;
  color: #fffaf0;
  font-family: "Josefin Sans", sans-serif;
  font-size: 1em;
  font-weight: 100;
  transition: all 0.3s ease-in-out;
  background-color: #4e1507;
  font-variant-caps: all-small-caps;
  margin: 18px auto;
}
html body #wrapper div main .contact button:hover {
  background-color: #4e1507;
  transition: all 0.3s ease-in-out;
}
html body #wrapper div main .contact button i {
  color: rgba(255, 250, 240, 0.6);
}
html body #wrapper div main .contact button:hover {
  background-color: #845f00;
}
html body #wrapper div main .contact fieldset {
  display: block;
  width: 100%;
  margin: auto;
}
html body #wrapper div main .contact fieldset label,
html body #wrapper div main .contact fieldset .label {
  display: block;
  margin-bottom: calc(9px);
  width: 100%;
}
html body #wrapper div main .contact fieldset input,
html body #wrapper div main .contact fieldset textarea,
html body #wrapper div main .contact fieldset select {
  display: block;
  padding: calc(9px);
  margin-left: 0;
  width: 100%;
}
html body #wrapper div main .contact fieldset select {
  /* keep month and day selectors on same line by alloting each so much space */
  display: inline-block;
}
html body #wrapper div main .contact fieldset select:nth-of-type(1) {
  width: 61%;
}
html body #wrapper div main .contact fieldset select:nth-of-type(2) {
  width: 35%;
  margin-left: 0;
}
html body #wrapper div main .contact button {
  width: 100%;
}
html body #wrapper div .mailing {
  padding: 18px;
  display: block;
  text-align: left;
  /* display labels above each fieldset */
  text-align: center;
  margin-top: 18px;
  background-image: url(../images/texture2.png);
  background-color: #5f4e00;
  color: #fffaf0;
}
html body #wrapper div .mailing p {
  font-family: "Josefin Sans", sans-serif;
  font-weight: 100;
}
html body #wrapper div .mailing fieldset {
  padding-top: 18px;
  font-family: "Josefin Sans", sans-serif;
  font-weight: 100;
}
html body #wrapper div .mailing fieldset input,
html body #wrapper div .mailing fieldset textarea,
html body #wrapper div .mailing fieldset select {
  opacity: .7;
  font-family: "Josefin Sans", sans-serif;
  font-weight: 300;
  font-size: 0.65em;
  box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.4);
}
html body #wrapper div .mailing fieldset textarea {
  height: 8em;
}
html body #wrapper div .mailing button {
  padding: calc(9px) 18px;
  text-align: center;
  background-color: #845f00;
  color: #fffaf0;
  font-family: "Josefin Sans", sans-serif;
  font-size: 1em;
  font-weight: 100;
  transition: all 0.3s ease-in-out;
  background-color: #4e1507;
  font-variant-caps: all-small-caps;
  margin: 18px auto;
}
html body #wrapper div .mailing button:hover {
  background-color: #4e1507;
  transition: all 0.3s ease-in-out;
}
html body #wrapper div .mailing button i {
  color: rgba(255, 250, 240, 0.6);
}
html body #wrapper div .mailing button:hover {
  background-color: #845f00;
}
html body #wrapper div .mailing fieldset {
  display: block;
  width: 100%;
  margin: auto;
}
html body #wrapper div .mailing fieldset label,
html body #wrapper div .mailing fieldset .label {
  display: block;
  margin-bottom: calc(9px);
  width: 100%;
}
html body #wrapper div .mailing fieldset input,
html body #wrapper div .mailing fieldset textarea,
html body #wrapper div .mailing fieldset select {
  display: block;
  padding: calc(9px);
  margin-left: 0;
  width: 100%;
}
html body #wrapper div .mailing fieldset select {
  /* keep month and day selectors on same line by alloting each so much space */
  display: inline-block;
}
html body #wrapper div .mailing fieldset select:nth-of-type(1) {
  width: 61%;
}
html body #wrapper div .mailing fieldset select:nth-of-type(2) {
  width: 35%;
  margin-left: 0;
}
html body #wrapper div .mailing button {
  width: 100%;
}
html body #wrapper div .mailing fieldset {
  text-align: left;
}
html body #wrapper div .mailing .border {
  /* shrink large ornamental borders */
}
html body #wrapper div .mailing .border path {
  fill: rgba(255, 250, 240, 0.3);
}
html body #wrapper div .mailing .border:last-of-type {
  transform: scale(0.7, 0.5) rotate(180deg);
}
html body #wrapper div .mailing h2 {
  font-size: 1.3em;
  color: rgba(255, 250, 240, 0.75);
}
html body #wrapper div .mailing p {
  font-family: "Josefin Sans", sans-serif;
  font-weight: 100;
}
html body #wrapper div #fixed-cart-btn {
  /* get contents centered */
  display: flex;
  justify-content: center;
  align-items: center;
  /* stick to bittom of page */
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 60px;
  background-color: rgba(132, 95, 0, 0.95);
  color: #fffaf0;
  box-shadow: 0 -2px 4px 1px rgba(0, 0, 0, 0.2);
  font-family: "Josefin Sans", sans-serif;
  font-weight: 100;
  /* stay above other elements on page */
  z-index: 1;
}
html body #wrapper div #fixed-cart-btn i {
  margin-left: calc(9px);
  color: rgba(255, 250, 240, 0.5);
}
html body #wrapper footer {
  /* allow room for fixed cart button to sit and not cover text */
  margin-bottom: 60px;
  padding: 18px;
  background-color: #fffaf0;
  background-image: url(../images/texture2.png);
  color: #4a2f00;
  text-align: center;
  font-size: 0.65em;
  font-family: "Josefin Sans", sans-serif;
  font-weight: 300;
}
html body #wrapper footer .group {
  display: flex;
  /* category links will probably be more useful to user than redundant site map links and should be seen first, but this will change when both lists are beside each other in larger resolutions, so we need to be flex-ible */
  flex-direction: column-reverse;
}
html body #wrapper footer h2 {
  text-align: center;
  color: #4a2f00;
  font-size: 1.5em;
  /* borders right below footer headings */
}
html body #wrapper footer h2::after {
  content: "";
  display: block;
  margin: auto;
  width: 100%;
  height: 5px;
  border-bottom: solid 1px rgba(74, 47, 0, 0.75);
}
html body #wrapper footer p {
  font-variant-caps: all-small-caps;
}
html body #wrapper footer ul {
  list-style: none;
}
html body #wrapper footer ul li {
  line-height: 2;
  font-size: 1.2em;
}
html body #wrapper footer a {
  color: #4a2f00;
}
html body #wrapper footer a i {
  padding: 18px;
  color: rgba(74, 47, 0, 0.75);
  position: relative;
  transition: all 0.3s ease-in-out;
}
html body #wrapper footer a i:hover {
  color: #845f00;
  transition: all 0.3s ease-in-out;
}
/* LARGER MOBILE UP STYLES */
@media only screen and (min-width: 400px) {
  html body #wrapper {
    /* don't need as tall of a header now that text fits on one line */
    padding-top: 80px;
  }
  html body #wrapper header {
    /* adjust for shorter header */
    margin-top: calc(-80px);
    height: 80px;
  }
  html body #wrapper div nav .mailing {
    /* hide bottom of page mailing form */
    display: none;
  }
  html body #wrapper div nav .mailing .border path {
    fill: rgba(255, 250, 240, 0.5);
  }
  html body #wrapper div main .filter .filter-menu ul li {
    /* fit 2 category columns */
    flex: 0 0 50%;
  }
  html body #wrapper div .contact {
    text-align: center;
  }
  html body #wrapper div .contact fieldset {
    /* display labels and inputs next to each other */
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin: auto;
  }
  html body #wrapper div .contact fieldset label,
  html body #wrapper div .contact fieldset .label {
    padding-right: calc(9px);
    width: 30%;
  }
  html body #wrapper div .contact fieldset input,
  html body #wrapper div .contact fieldset textarea,
  html body #wrapper div .contact fieldset select {
    padding: calc(9px);
    width: 70%;
  }
  html body #wrapper div .contact fieldset select {
    /* divide space leftover from label between month and day selectors */
  }
  html body #wrapper div .contact fieldset select:nth-of-type(1) {
    width: 40%;
  }
  html body #wrapper div .contact fieldset select:nth-of-type(2) {
    width: 25%;
    margin-left: 4%;
  }
  html body #wrapper div .contact button {
    width: 50%;
  }
  html body #wrapper div .contact p {
    font-family: "Josefin Sans", sans-serif;
    font-weight: 100;
  }
  html body #wrapper div .mailing {
    /* form now on nav bar */
    text-align: center;
  }
  html body #wrapper div .mailing fieldset {
    /* display labels and inputs next to each other */
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin: auto;
  }
  html body #wrapper div .mailing fieldset label,
  html body #wrapper div .mailing fieldset .label {
    padding-right: calc(9px);
    width: 30%;
  }
  html body #wrapper div .mailing fieldset input,
  html body #wrapper div .mailing fieldset textarea,
  html body #wrapper div .mailing fieldset select {
    padding: calc(9px);
    width: 70%;
  }
  html body #wrapper div .mailing fieldset select {
    /* divide space leftover from label between month and day selectors */
  }
  html body #wrapper div .mailing fieldset select:nth-of-type(1) {
    width: 40%;
  }
  html body #wrapper div .mailing fieldset select:nth-of-type(2) {
    width: 25%;
    margin-left: 4%;
  }
  html body #wrapper div .mailing button {
    width: 50%;
  }
  html body #wrapper div .mailing fieldset {
    text-align: left;
  }
}
/* TABLET UP STYLES */
@media only screen and (min-width: 481px) {
  html .mobile {
    /* don't display anything meant only for mobile */
    display: none !important;
  }
  html .flex-link a::after {
    /* more opaque underlining to match thicker text */
    border-top: solid 1px rgba(78, 21, 7, 0.8);
  }
  html body {
    font-size: 20px;
  }
  html body #wrapper h1,
  html body #wrapper .back-to-shop {
    font-weight: 300;
  }
  html body #wrapper header .header-col:nth-of-type(1) {
    /* allow more space for larger logo dimensions */
    width: 20%;
  }
  html body #wrapper header .header-col:nth-of-type(1) svg {
    height: 80px;
    width: 80px;
  }
  html body #wrapper header .header-col:nth-of-type(2) {
    width: 60%;
  }
  html body #wrapper header .header-col:nth-of-type(2) a {
    font-size: 2em;
  }
  html body #wrapper header .header-col:nth-of-type(3) {
    width: 20%;
    /* show basket button */
  }
  html body #wrapper header .header-col:nth-of-type(3) a {
    display: block;
    color: #845f00;
    font-family: "Josefin Sans", sans-serif;
    font-variant-caps: all-small-caps;
  }
  html body #wrapper header .header-col:nth-of-type(3) a i {
    margin-left: calc(9px);
  }
  html body #wrapper div main p,
  html body #wrapper div main ul {
    /* adjust link text to stay heavier than normal text */
    font-weight: 400;
  }
  html body #wrapper div main p a:link,
  html body #wrapper div main ul a:link,
  html body #wrapper div main p a:visited,
  html body #wrapper div main ul a:visited {
    font-weight: 600;
  }
  html body #wrapper div main .filter .filter-menu ul li {
    /* fit 1 category column */
    flex: 0 0 100%;
  }
  html body #wrapper div main .filter .filter-menu button {
    font-weight: 300;
    color: rgba(255, 250, 240, 0.75);
  }
  html body #wrapper div nav {
    position: relative;
    left: 0;
    /* width */
    flex: 0 0 220px;
    height: auto;
    opacity: 1;
    z-index: 0;
    background-color: #5f4e00;
    font-weight: 300;
    color: rgba(255, 250, 240, 0.75);
  }
  html body #wrapper div nav ul {
    padding-top: calc(9px);
  }
  html body #wrapper div nav ul li {
    border-bottom: 0;
    text-align: left;
  }
  html body #wrapper div nav ul li a {
    padding: calc(9px);
    padding-left: 18px;
    color: rgba(255, 250, 240, 0.75);
    transition: all 0.3s ease-in-out;
  }
  html body #wrapper div nav ul li a:hover,
  html body #wrapper div nav ul li a:active {
    background-color: rgba(132, 95, 0, 0.5);
    transition: all 0.3s ease-in-out;
  }
  html body #wrapper div nav .nav-basket a {
    font-weight: 300;
    color: rgba(255, 250, 240, 0.75);
  }
  html body #wrapper div nav .mailing {
    display: block;
    text-align: left;
    /* display labels above each fieldset */
    text-align: center;
    margin-top: 0;
    background-color: transparent;
    /* make fancy borders their initial size */
  }
  html body #wrapper div nav .mailing fieldset {
    display: block;
    width: 100%;
    margin: auto;
  }
  html body #wrapper div nav .mailing fieldset label,
  html body #wrapper div nav .mailing fieldset .label {
    display: block;
    margin-bottom: calc(9px);
    width: 100%;
  }
  html body #wrapper div nav .mailing fieldset input,
  html body #wrapper div nav .mailing fieldset textarea,
  html body #wrapper div nav .mailing fieldset select {
    display: block;
    padding: calc(9px);
    margin-left: 0;
    width: 100%;
  }
  html body #wrapper div nav .mailing fieldset select {
    /* keep month and day selectors on same line by alloting each so much space */
    display: inline-block;
  }
  html body #wrapper div nav .mailing fieldset select:nth-of-type(1) {
    width: 61%;
  }
  html body #wrapper div nav .mailing fieldset select:nth-of-type(2) {
    width: 35%;
    margin-left: 0;
  }
  html body #wrapper div nav .mailing button {
    width: 100%;
  }
  html body #wrapper div nav .mailing fieldset {
    text-align: left;
  }
  html body #wrapper div nav .mailing h2 {
    font-family: "Cormorant Upright", serif;
  }
  html body #wrapper div nav .mailing .border {
    transform: scale(1, 1);
  }
  html body #wrapper div nav .mailing .border:last-of-type {
    transform: scale(1, 1) rotate(180deg);
  }
  html body #wrapper div nav .mailing p {
    font-weight: 300;
    color: rgba(255, 250, 240, 0.75);
  }
  html body #wrapper div nav .mailing button {
    font-weight: 300;
    color: rgba(255, 250, 240, 0.75);
  }
  html body #wrapper div main {
    width: 100%;
  }
  html body #wrapper div main ul {
    font-weight: 300;
    /* for inline elements only meant for tablet-up */
  }
  html body #wrapper div main ul .tablet-up {
    display: inline;
  }
  html body #wrapper div main .contact {
    display: block;
    text-align: left;
    /* display labels above each fieldset */
    font-weight: 300;
  }
  html body #wrapper div main .contact fieldset {
    display: block;
    width: 100%;
    margin: auto;
  }
  html body #wrapper div main .contact fieldset label,
  html body #wrapper div main .contact fieldset .label {
    display: block;
    margin-bottom: calc(9px);
    width: 100%;
  }
  html body #wrapper div main .contact fieldset input,
  html body #wrapper div main .contact fieldset textarea,
  html body #wrapper div main .contact fieldset select {
    display: block;
    padding: calc(9px);
    margin-left: 0;
    width: 100%;
  }
  html body #wrapper div main .contact fieldset select {
    /* keep month and day selectors on same line by alloting each so much space */
    display: inline-block;
  }
  html body #wrapper div main .contact fieldset select:nth-of-type(1) {
    width: 61%;
  }
  html body #wrapper div main .contact fieldset select:nth-of-type(2) {
    width: 35%;
    margin-left: 0;
  }
  html body #wrapper div main .contact button {
    width: 100%;
  }
  html body #wrapper footer {
    /* no more bg of mailing form to separate light main from light footer, so make footer a darker color (bg color same as mobile footer text color) */
    background-color: #4a2f00;
    color: #fffaf0;
    margin-bottom: 0;
  }
  html body #wrapper footer h2 {
    color: #fffaf0;
    text-align: left;
  }
  html body #wrapper footer h2::after {
    margin: 0;
    border-bottom-color: rgba(255, 250, 240, 0.5);
  }
  html body #wrapper footer ul li {
    text-align: left;
  }
  html body #wrapper footer a {
    color: #fffaf0;
  }
  html body #wrapper footer a:after {
    border-color: rgba(255, 250, 240, 0.5);
  }
  html body #wrapper footer a i {
    color: rgba(255, 250, 240, 0.5);
  }
  html body #wrapper footer a i:hover {
    color: #fffaf0;
  }
}
/* TABLET (LANDSCAPE) CSS CODE AND UP */
@media only screen and (min-width: 769px) {
  html body #wrapper div main .teahouse-pic {
    /* don't let images overlap and choke out text between them */
    max-width: 40%;
    /* alternate image positions for more fluid, dynamic look, a bit more like illustrations in a book */
  }
  html body #wrapper div main .teahouse-pic:nth-of-type(odd) {
    float: right;
    margin-left: 18px;
  }
  html body #wrapper div main .teahouse-pic:nth-of-type(even) {
    float: left;
    margin-right: 18px;
  }
  html body #wrapper div main .filter .filter-menu ul li {
    /* fit 2 category columns */
    flex: 0 0 50%;
  }
  html body #wrapper div main .sample-container .samples li {
    /* fit 2 columns */
    flex: 0 0 50%;
  }
  html body #wrapper div main .product-page button {
    /* now let add-to-cart button hang near price or else it will be way too far away */
    right: auto;
    font-weight: 300;
    color: rgba(255, 250, 240, 0.75);
  }
  html body #wrapper div main .teahouse-info {
    display: flex;
    flex-wrap: wrap;
  }
  html body #wrapper div main .teahouse-info .contact-info,
  html body #wrapper div main .teahouse-info .hours {
    flex: 0 0 100%;
    height: min-content;
  }
  html body #wrapper footer .group {
    /* don't need to reverse columns anymore; main page links on left and categories on right looks more logical */
    flex-direction: row;
  }
}
/* DESKTOP UP STYLES */
@media only screen and (min-width: 1025px) {
  html body {
    font-size: 18px;
  }
  html body #wrapper div main .filter .filter-menu {
    /* make large enough to fit 3 columns but not spread across a whole screen into tiny columns */
    width: 55%;
  }
  html body #wrapper div main .filter .filter-menu ul li {
    /* fit 3 category columns */
    flex: 0 0 33.33%;
  }
  html body #wrapper div main .sample-container .samples li {
    /* fit all 4 in a row */
    flex: 0 0 25%;
  }
  html body #wrapper div main .sample-container .samples li .sample-wrapper .thumb-wrapper {
    /* with more room to spare, images can take up a bit more space */
    flex: 0 0 20%;
  }
  html body #wrapper div main .teahouse-info .contact-info,
  html body #wrapper div main .teahouse-info .hours {
    /* display contact-info and hours side by side above map */
    flex: 0 0 50%;
  }
}