/* Include Header & Footer Styles */
@import "header.css";
@import "footer.css";

/* Include Content Block Styles */
@import "blocks/hero.css";
@import "blocks/text_image_split.css";
@import "blocks/double_split.css";
@import "blocks/hero_split.css";
@import "blocks/testimonials.css";
@import "blocks/accolades.css";
@import "blocks/product_bundles.css";
@import "blocks/product_box_sets.css";
@import "blocks/product_collection_cards.css";
@import "blocks/email_signup.css";
@import "blocks/arches.css";
@import "blocks/medallions.css";

/* Include Fonts */
@import "fonts.css";

/* Global Variables */
:root {

  /* Responsiveness */
  --breakpoint: 800;

  /* Color Variables */
  --color-white:#ffffff;
  --color-light-grey:#f0f0f0;
  --color-med-grey:#cccccc;
  --color-dark-grey:#454545;
  --color-extra-dark-grey:#151515;
  --color-black:#000000;
  --color-creme:#FBFAF3;
  --color-med-creme:#F0EFE5;
  --color-dark-creme:#EAE4D5;
  --color-peach:#F5D8C2;
  --color-peach-trans:#f5d8c1cf;
  
  /* Font Variables */

    /* Headings */
        /* h1 */
        --h1-family: "Bajern";
        --h1-size: max(60px, min(6vw, 90px));
        /* h2 */
        --h2-family: "Bajern";
        --h2-size: max(60px, min(6vw, 90px));
        /* h3 */
        --h3-family: "Bajern";
        --h3-size: max(32px, min(4vw, 60px));
        /* h4 */
        --h4-family: "Bajern";
        --h4-size: max(24px, min(6vw, 40px));
    /* Paragraph */
        /* p */
        --p-family: "Montserrat", sans-serif;
        --p-size: 14px;
    /* Detail Text */
        --detail-family: "Kapra", sans-serif;
        --detail-size: 14px;
    /* Call To Action */
        /* Button */
        --button-font-family: "Montserrat", sans-serif;
        --button-font-size: 14px;

  /* Layout Variables */
    --nav-height: 75px;
    /* Spacing */
    --section-spacing:4vh;
    /* Gaps */
    --gap-x-small:0.5rem;
    --gap-small:1rem;
    --gap-medium:2rem;
    --gap-large:3rem;
    --gap-grid:1rem;
}

/* Fonts */
p {
  font-family: var(--p-family);
  font-size:var(--p-size);
  line-height:24px;
  margin-bottom: 25px;
}
.detail-text {
  font-family:var(--detail-family);
  font-size: var(--detail-size);
  letter-spacing: calc(var(--detail-size) / 8);
  line-height: normal;
  text-transform: uppercase;
}
.h1 {
	font-size:var(--h1-size);
  font-family:var(--h1-family);
  transform: translateY(calc(-1 * var(--h1-size) / 6));
  letter-spacing: 2px;
  font-weight:400;
  display: inline-block;
}
.h2 {
	font-size:var(--h2-size);
	font-family:var(--h2-family);
  transform: translateY(calc(-1 * var(--h2-size) / 6));
	font-weight:400;
  line-height:0.85;
  display: inline-block;
}
.h3 {
	font-size:var(--h3-size);
	font-family:var(--h3-family);
  transform: translateY(calc(-1 * var(--h3-size) / 6));
	font-weight:400;
  display: inline-block;
}
.h4 {
	font-size:var(--h4-size);
	font-family:var(--h4-family);
  transform: translateY(calc(-1 * var(--h4-size) / 6));
	font-weight:400;
  display: inline-block;
}

/* Global */
main {
	position:relative;
}
body {
  -webkit-font-smoothing: antialiased;
}
header {
}

/* Seperators */
hr {
  width:100%;
  height:1px;
  background:var(--color-black);
  &.white {
    background:var(--color-white);
  }
}

.info-seperator {
  font-size: 20px;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  &::before {
    content: '';
    margin-right: var(--gap-grid);
    flex: 1 1 auto;
    border-bottom: solid 1px #D0D0D0;
  }
  &::after {
    content: '';
    margin-left: var(--gap-grid);
    flex: 1 1 auto;
    border-bottom: solid 1px #D0D0D0;
  }
}

.spacer {
  margin: var(--section-spacing) 0;
}

/* Layout Helper Utilities */
.container {
	padding:0 4vw;
	width:100%;
	max-width:1600px;
	margin:0 auto;
}
.margin-top {
  margin-top:var(--section-spacing);
}
.padding-top {
  padding-top:var(--section-spacing);
}
.margin-bottom {
  margin-bottom:var(--section-spacing);
}
.padding-bottom {
  padding-bottom:var(--section-spacing);
}

/* Text Helper Utilities */
.text-center {
  text-align:center;
  display: block;
}
.error {
  height: calc(100dvh - var(--nav-height));
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: linear-gradient(to bottom, var(--color-black), var(--color-extra-dark-grey));
  color: var(--color-white);
}

/* Buttons & Links */
.button {
  background:var(--color-black);
  color:var(--color-white);
  text-transform:uppercase;
  cursor:pointer;
  border:none;
  padding: 10px 24px;
  font-family:var(--button-font-family);
  font-size: var(--button-font-size);
  font-weight: 600;
  letter-spacing: 1px;
  line-height:1;
	display:inline-block;
  -webkit-appearance:none;
  border: 1px solid var(--color-black);
  &.hollow {
    background:none;
    border: 1px solid var(--color-black);
    color: var(--color-black);
    box-shadow:5px 10px 20px rgba(0, 0, 0, 0);
    transform: scale(1);
    transition: outline-offset 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease !important;
    &:hover {
      box-shadow: 5px 10px 20px rgba(0, 0, 0, 0.75);
      transform: scale(1.1);
      transition: box-shadow 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
    }
    &.white {
      border: 1px solid var(--color-white);
      color: var(--color-white);
    }
  }
  &.white {
    border: 1px solid var(--color-white);
    color: var(--color-white);
  }
  &.rounded {
    border-radius: 100000px;
  }
  &.is-active {
		outline: 1px solid black;
		outline-offset: 5px;
    transition: outline-offset 0.2s ease;
	}
}

.hyperlink {
  font-family: var(--button-font-family);
  text-decoration: none;
  text-transform: uppercase;
  border: 0;
  color: #ffffff;
  font-weight: 600;
  display: inline-block;
  font-size: var(--button-font-size);
  letter-spacing: 2px;
}

.add-to-cart-controls {
  display:flex;
  align-items: center;
  height:40px;
  & .button.add-to-cart {
    height:100%;
  }
}
/* Add To Cart: Legacy Style */
.add-to-cart {
  display: flex;
  align-items: center;
  border:none;
  text-transform:none;
  letter-spacing: none;
  background:var(--color-black);
  cursor:pointer;
  color:var(--color-white);
  font-size:14px;
  border-radius:4px;
  padding: 10px 20px;
  border:1px solid var(--color-black);
  font-weight:500;
  transition: background-color 0.5s ease; 
}

/* Quantity Selector */
.qty-selector {
  font-family: var(--button-font-family);
  font-size: var(--button-font-size);
  font-weight: 600;
  margin-right:4px;
  border-radius:4px;
  display:flex;
  height:100%;
  align-items:center;
  background-color: transparent;
  & .qty-up, .qty-down {
    padding:6px 12px;
    cursor:pointer;
    user-select:none;
  }
  &.outlined {
    border:1px solid var(--color-black);
    color:var(--color-black);
  }
}


/* Video */
.bg-video {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  z-index:0;
  
  & video {
    min-width: 100vw;
    min-height: 100vh;
    flex: 1 1 auto;
    object-fit: cover;
    transition:opacity 0.8s ease;
    z-index:1;
    position:relative;
  }
  & .bg-overlay {
    height: 100%;
    width: 100%;
    position: absolute;
    z-index:10;
  }
  & video.loaded {
    opacity:1;
  }
}