@font-face { font-family: WildKind; src: url('assets/WildKind.ttf') format('truetype'); }
@font-face { font-family: Mermaid; src: url('assets/Mermaid1001.ttf') format('truetype'); }
@font-face { font-family: Myriad; src: url('assets/MyriadVariableConcept-Roman.otf') format('opentype'); }

:root { --brown: #363125; --gold: #ffbd1f; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 1024px; color: var(--brown); background: #fff; }
a { color: inherit; }

.site-header { position: sticky; top: 0; z-index: 10; width: 100%; line-height: 0; }
.header-art, .footer-art { display: block; width: 100%; height: auto; }
.home-logo-link { position: absolute; z-index: 2; top: 0; bottom: 0; left: 35%; width: 30%; }
.header-art-tablet, .menu-toggle, .menu-overlay, .carousel-arrow { display: none; }
.main-nav { position: absolute; top: 45.5%; left: 4.35%; display: flex; gap: 31px; line-height: 1; }
.main-nav a, .footer-nav a { color: #fff; font: 27px/1 WildKind, serif; text-decoration: none; }
.main-nav a:hover, .footer-nav a:hover { color: var(--gold); }

.hero img { display: block; width: 100%; height: auto; }
.flavors { padding-top: 68px; overflow: hidden; }
.flavors h1 { max-width: 1206px; margin: 0 auto 37px; font: 80px/.95 WildKind, serif; letter-spacing: -.8px; }
.flavor-stage { position: relative; width: 100%; line-height: 0; }
.bottles-default, .flavor-stage::after { display: block; width: 100%; height: auto; }
.flavor-stage::after { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: var(--hover-image); background-repeat: no-repeat; background-size: 100% auto; background-position: calc(var(--hover-center) - 526px) 0; clip-path: inset(4% calc(100% - (var(--hover-center) + 175px)) 5% calc(var(--hover-center) - 175px)); opacity: 0; transition: opacity .28s ease; }
.flavor-stage.is-hovered::after { opacity: 1; }
.bottle-hitbox { position: absolute; z-index: 1; top: 4%; width: 20%; height: 90%; border: 0; background: transparent; cursor: pointer; }
.sweet-bee { left: 1%; }.sweet-cinna { left: 25%; }.spicy-bee { left: 50%; }.spicy-cinna { left: 76%; }
.products { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; padding: 30px 4.4% 34px; text-align: center; }
.products h2 { margin: 0 0 12px; font: 43px/.95 WildKind, serif; }
.products p { min-height: 65px; margin: 0 0 23px; font: 22px/1.06 Mermaid, serif; }
.learn-more { display: inline-block; width: 100%; max-width: 226.94px; line-height: 0; }
.learn-more img { display: block; width: 100%; height: auto; }
.learn-more:hover img { content: url('assets/LearnMoreRollOver_1366x768.svg'); }

.site-footer { position: relative; background: var(--brown); color: #fff; line-height: 0; }
.footer-content { position: absolute; inset: 0; line-height: 1; }
.social-links { position: absolute; left: 4.4%; bottom: 23.5%; display: flex; align-items: center; gap: 25px; }
.social { display: block; width: 37px; height: 42px; background: center / contain no-repeat; }
.facebook { background-image: url('assets/FacebookIcon_Desktop.svg'); }.instagram { background-image: url('assets/InstagramIcon_Desktop.svg'); }.tiktok { background-image: url('assets/TikTokIcon_Desktop.svg'); }
.facebook:hover { background-image: url('assets/FacebookIcon_RollOver_Desktop.svg'); }.instagram:hover { background-image: url('assets/InstagramIcon_RollOver_Desktop.svg'); }.tiktok:hover { background-image: url('assets/TikTokIcon_RollOver_Desktop.svg'); }
.copyright { position: absolute; left: 4.4%; bottom: 7.5%; margin: 0; font: 18px/1 Mermaid, serif; }.copyright a { color: inherit; text-decoration: none; }
.footer-nav { position: absolute; right: 4.6%; bottom: 19%; display: flex; gap: 57px; }
.footer-nav a { font-size: 30px; }

@media (max-width: 1365px) { .main-nav a { font-size: 2vw; }.main-nav { gap: 2.3vw; }.flavors { padding-top: 5vw; }.flavors h1 { margin: 0 4.4vw 2.7vw; font-size: 5.85vw; }.products { padding-top: 2.2vw; padding-bottom: 2.49vw; }.products h2 { font-size: 3.15vw; }.products p { min-height: 4.75vw; font-size: 1.61vw; }.footer-nav a { font-size: 2.2vw; }.copyright { font-size: 1.32vw; } }

@media (min-width: 601px) and (max-width: 1023px) {
  body { min-width: 0; }
  .header-art, .main-nav { display: none; }
  .header-art-tablet { display: block; width: 100%; height: auto; }
  .home-logo-link { left: 4%; width: 66%; }
  .menu-toggle { display: grid; place-items: center; position: absolute; top: 27%; right: 5.2%; width: 9%; border: 0; padding: 0; background: transparent; cursor: pointer; }
  .menu-toggle img { width: 100%; }
  .hero img { width: 100%; }
  .flavors { padding-top: 62px; }
  .flavors h1 { margin: 0 0 55px; text-align: center; font-size: 62px; }
  .flavor-stage { height: 768px; overflow: hidden; background: #fff; }
  .bottles-default { position: absolute; top: 0; left: -142px; width: 1365px; max-width: none; }
  .bottles-default { transition: opacity .2s ease; }
  .flavor-stage::after, .bottle-hitbox { display: none; }
  .carousel-arrow { display: grid; place-items: center; position: absolute; z-index: 2; top: 43%; width: 94px; height: 100px; padding: 0; border: 0; background: transparent; cursor: pointer; }
  .carousel-arrow img { width: 100%; height: auto; }
  .carousel-prev { left: 41px; }.carousel-next { right: 41px; }
  .products { display: block; min-height: 312px; padding: 48px 32px 54px; }
  .products article { display: none; }.products article.is-active { display: block; }
  .products h2 { margin-bottom: 18px; font-size: 49px; }.products p { min-height: 87px; margin-bottom: 30px; font-size: 25px; }
  .learn-more { width: 270px; max-width: 270px; }.learn-more img { content: url('assets/LearnMore_Tablet.svg'); }.learn-more:hover img { content: url('assets/LearnMore_RollOver_Tablet.svg'); }
  .footer-art { content: url('assets/BeehaveHoneyFooter_Tablet.svg'); }.site-footer { min-height: 305px; }
  .social-links { left: 4.2%; bottom: 25%; gap: 18px; }.social { width: 19px; height: 21px; }.facebook { background-image: url('assets/FacebookIcon_Tablet.svg'); }.instagram { background-image: url('assets/InstagramIcon_Tablet.svg'); }.tiktok { background-image: url('assets/TikTokIcon_Tablet.svg'); }.facebook:hover { background-image: url('assets/FacebookIcon_RollOver_Tablet.svg'); }.instagram:hover { background-image: url('assets/InstagramIcon_RollOver_Tablet.svg'); }.tiktok:hover { background-image: url('assets/TikTokIcon_RollOver_Tablet.svg'); }
  .copyright { left: 4.2%; bottom: 8%; font-size: 10px; }.footer-nav { right: 7.7%; bottom: 22%; gap: 25px; }.footer-nav a { font-size: 17px; }
  .menu-overlay { display: block; position: fixed; z-index: 30; inset: 0; overflow: hidden; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .25s ease, visibility .25s; background: var(--brown); }
  .menu-overlay.is-open { opacity: 1; visibility: visible; pointer-events: auto; }.menu-art { position: absolute; inset: 0; width: 100%; height: 100%; }
  .menu-close { position: absolute; top: 4.7%; right: 8.4%; width: 8%; border: 0; padding: 0; background: transparent; cursor: pointer; }.menu-close img { width: 100%; }
  .menu-links { position: absolute; top: 29%; left: 0; right: 0; display: grid; gap: 55px; text-align: center; }.menu-links a { color: #fff; font: 62px/1 WildKind, serif; text-decoration: none; }.menu-links a:hover { color: #fbdd1f; }
  .menu-social { position: absolute; bottom: 5.4%; left: 0; right: 0; display: flex; justify-content: center; gap: 66px; }.menu-social a { width: 36px; height: 40px; background: center / contain no-repeat; }.menu-facebook { background-image: url('assets/FacebookIcon_HamburgerMenu_Tablet.svg'); }.menu-instagram { background-image: url('assets/InstagramIcon_HamburgerMenu_Tablet.svg'); }.menu-tiktok { background-image: url('assets/TikTokIcon_HamburgerMenu_Tablet.svg'); }.menu-facebook:hover { background-image: url('assets/FacebookIcon_HamburgerMenu_RollOver_Tablet.svg'); }.menu-instagram:hover { background-image: url('assets/InstagramIcon_HamburgerMenu_RollOver_Tablet.svg'); }.menu-tiktok:hover { background-image: url('assets/TikTokIcon_HamburgerMenu_RollOver_Tablet.svg'); }
}

@media (max-width: 600px) {
  body { min-width: 0; }
  .header-art, .main-nav { display: none; }
  .header-art-tablet { display: block; width: 100%; height: auto; content: url('assets/BeehaveHoneyHeader_Mobile.svg'); }
  .home-logo-link { left: 4%; width: 66%; }
  .menu-toggle { display: grid; place-items: center; position: absolute; top: 27%; right: 5.4%; width: 8.4%; border: 0; padding: 0; background: transparent; cursor: pointer; }
  .menu-toggle img { width: 100%; content: url('assets/HamburgerMenu_Mobile.svg'); }
  .hero img { width: 100%; }
  .flavors { padding-top: 30px; }
  .flavors h1 { margin: 0 0 33px; text-align: center; font-size: 32px; letter-spacing: 0; }
  .flavor-stage { height: 400px; overflow: hidden; background: #fff; }
  .bottles-default { position: absolute; top: 0; left: -170px; width: 960px; max-width: none; transition: opacity .2s ease; }
  .flavor-stage::after, .bottle-hitbox { display: none; }
  .carousel-arrow { display: grid; place-items: center; position: absolute; z-index: 2; top: 43%; width: 50px; height: 51px; padding: 0; border: 0; background: transparent; cursor: pointer; }
  .carousel-arrow img { width: 100%; height: auto; }.carousel-prev { left: 21px; }.carousel-next { right: 21px; }
  .carousel-prev img { content: url('assets/LeftArrow_Mobile.svg'); }.carousel-next img { content: url('assets/RightArrow_Mobile.svg'); }
  .products { display: block; min-height: 261px; padding: 26px 14px 35px; }
  .products article { display: none; }.products article.is-active { display: block; }
  .products h2 { margin-bottom: 10px; font-size: 26px; }.products p { min-height: 46px; margin-bottom: 18px; font-size: 13px; }
  .learn-more { width: 137px; max-width: 137px; }.learn-more img { content: url('assets/LearnMore_Mobile.svg'); }.learn-more:hover img { content: url('assets/LearnMore_RollOver_Mobile.svg'); }
  .footer-art { content: url('assets/BeehaveHoneyFooter_Mobile.svg'); }.site-footer { min-height: 158px; }
  .social-links { left: 7.4%; bottom: 27%; gap: 16px; }.social { width: 14px; height: 15px; }.facebook { background-image: url('assets/FacebookIcon_Mobile.svg'); }.instagram { background-image: url('assets/InstagramIcon_Mobile.svg'); }.tiktok { background-image: url('assets/TikTokIcon_Mobile.svg'); }.facebook:hover { background-image: url('assets/FacebookIcon_RollOver_Mobile.svg'); }.instagram:hover { background-image: url('assets/InstagramIcon_RollOver_Mobile.svg'); }.tiktok:hover { background-image: url('assets/TikTokIcon_RollOver_Mobile.svg'); }
  .copyright { left: 7.4%; bottom: 8%; font-size: 8px; }.footer-nav { right: 6.5%; bottom: 23%; gap: 20px; }.footer-nav a { font-size: 13px; }
  .menu-overlay { display: block; position: fixed; z-index: 30; inset: 0; overflow: hidden; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .25s ease, visibility .25s; background: var(--brown); }
  .menu-overlay.is-open { opacity: 1; visibility: visible; pointer-events: auto; }.menu-art { position: absolute; inset: 0; width: 100%; height: 100%; content: url('assets/HamburgerMenu_Background_Mobile.svg'); }
  .menu-close { position: absolute; top: 5%; right: 8.5%; width: 8.5%; border: 0; padding: 0; background: transparent; cursor: pointer; }.menu-close img { width: 100%; content: url('assets/HamburgerX_Mobile.svg'); }
  .menu-links { position: absolute; top: 29%; left: 0; right: 0; display: grid; gap: 32px; text-align: center; }.menu-links a { color: #fff; font: 32px/1 WildKind, serif; text-decoration: none; }.menu-links a:hover { color: #fbdd1f; }
  .menu-social { position: absolute; bottom: 5.6%; left: 0; right: 0; display: flex; justify-content: center; gap: 37px; }.menu-social a { width: 25px; height: 30px; background: center / contain no-repeat; }.menu-facebook { background-image: url('assets/FacebookIcon_HamburgerMenu_Mobile.svg'); }.menu-instagram { background-image: url('assets/InstagramIcon_HamburgerMenu_Mobile.svg'); }.menu-tiktok { background-image: url('assets/TikTokIcon_HamburgerMenu_Mobile.svg'); }.menu-facebook:hover { background-image: url('assets/FacebookIcon_HamburgerMenu_RollOver_Mobile.svg'); }.menu-instagram:hover { background-image: url('assets/InstagramIcon_HamburgerMenu_RollOver_Mobile.svg'); }.menu-tiktok:hover { background-image: url('assets/TikTokIcon_HamburgerMenu_RollOver_Mobile.svg'); }
}