@import url('https://fonts.googleapis.com/css2?family=Special+Elite&display=swap');


/* -------------------------------------------------------------------------- */
/* global
/* -------------------------------------------------------------------------- */

/* border box everything (https://www.paulirish.com/2012/box-sizing-border-box-ftw/) */
html { -webkit-box-sizing: border-box; box-sizing: border-box; overflow-x: hidden; -webkit-text-size-adjust: 100%; }

*,
*:before,
*:after { -webkit-box-sizing: inherit; box-sizing: inherit; }

body,
p,
input,
textarea { /*font-family: "ClarendonURW-Reg";*/ }

body { /*-webkit-text-size-adjust: 100%;*/ }

a { text-decoration: none; /*color: rgb(182, 179, 225);*/ }

a:active,
a:focus { outline: 0; -moz-outline-style: none; }

button { padding: 0; }


/* -------------------------------------------------------------------------- */
/* fix for the apple momentum scroll problem
/* -------------------------------------------------------------------------- */
/* from https://greensock.com/forums/topic/24624-scrolltrigger-scrollto-timeline-animation/ */

/* technically this fixes the problem of page jumping to random place after inertia(momentum) scroll stops, but this also means that we can't detect if user is scrolling up/down page in iOS so we can't hide the nav properly 


// this fix causes more problems than it solves: 


html { position: fixed; width: 100%; height: 100%; overflow: hidden; }
body { overflow: auto; position: relative; height: 100%; }
*/
/*
// this fix causes more problems than it solves: 

html, body { overflow-y: scroll; -webkit-overflow-scrolling: touch; }
*/






/* -------------------------------------------------------------------------- */
/* mobile-only, so hide on desktop
/* -------------------------------------------------------------------------- */
/*

.flower-mobile { display: none; }


@media only screen and (min-width: 769px)
{
  .mobile-only,
  .nav-mobile,
  .mobile-menu-modal,
  .hero-mobile,
  .visit-mobile,
  .footer-mobile,
  .footer-midres__row { display: none; }
}

*/



/* -------------------------------------------------------------------------- */
/* variables
/* -------------------------------------------------------------------------- */

:root
{
  /*--page-container-width: 1440px;*/ /* works out to 1920 because of the 20px padding on each side */
  
  /*--orange: #FF5A35;
  --orange-faded: #FFB295;*/
  

  --page-content-horizontal-padding: 80px;
  --page-content-horizontal-padding-about-and-legal-pages: 120px;

  --menu-bar-height: 46px;

  --squiggle-width: 1600px;
  --squiggle-height: 20px;

  --section-divider-height: 50px;

  /* bzam colors */
  --dark-color     : #221f1f;
  --light-color    : #f0efd9;
  --blue           : #6acbb8;
  --multi-pack-blue: #7383a5;
  --yellow         : #e1e733;
  --dark-text-color: #231f20;
  --orange         : #ff5d3f;
  --orange-dark    : #AA2E00;
  --orange-20      : rgba(255 93 63 / .2);

  --hover-color    : #e2e548;

  /* below are old ness colors */
  --yellow-light: #fef79e;
  --yellow-dark : #dda823;

  --lavender    : #dbb0de;
  --violet      : #8c0a50;
  --violet-light: #a8005c; 

  --vertical-margin-between-carousels         : 40px;
  --negative-vertical-margin-between-carousels: -40px; /* keep this identical to above (but negative) */


  --heading-font-size: 55px;
  
  /*--teal: #70DFC0;
  --bg-light-color: #E5E1CB;

  --box-shadow: 8px 8px 0px #1e1e1e;

  --footer-border-style: 2px solid #f8f7f1; */
}


@media screen and (min-width: 2001px)
{
  :root
  {
    --page-content-horizontal-padding: 8vw;
    --page-content-horizontal-padding-about-and-legal-pages: 12vw;
  }
}

@media screen and (min-width: 1601px)
{
  :root
  {
    --squiggle-width-OLD: 1600px; /*101%;*/ /* needs to be 101% because of this 1px problem: .nav__squiggle-image; so we make that nav squiggle bigger which means all squiggles need to be bigger too so they line up properly */
    --squiggle-height-OLD: 2.6vw;
  }
}


@media screen and (max-width: 1079px)
{
  :root
  {
    --page-content-horizontal-padding: 40px;
    --page-content-horizontal-padding-about-and-legal-pages: 40px;
  }
}


@media screen and (max-width: 600px)
{
  :root
  {
    --page-content-horizontal-padding: 20px;
    --page-content-horizontal-padding-about-and-legal-pages: 20px;

    --heading-font-size: 48px;
  }
}





/* -------------------------------------------------------------------------- */
/* fonts
/* -------------------------------------------------------------------------- */

/*
.issue__text { font-family: "ClarendonURW-Reg"; font-weight: bold; font-size: 32px; letter-spacing: .5px;  }



.strain__percent-number { font-size: 24px; font-family: "AlternateGothicPro-No2"; color: #1e1e1e; }




.where__individual-province {  font-family: "PalmerLakePrint-Regular"; font-size: 40px; color: var(--orange); line-height: .7; }
*/







/* -------------------------------------------------------------------------- */
/* global / reusable pieces
/* -------------------------------------------------------------------------- */


.flex-center-center {
  display: flex;
  align-items: center;
  justify-content:  center;
}

[data-carousel-arrow="disabled"] {  }


.rectangle-button { width: 100%; display: inline-block; /*border: 2px solid var(--light-color); border-radius: 8px; padding: 20px 42px; font-family: var(--extended-bold-underlined); font-size: 22px; color: var(--light-color);*/ }
.rectangle-button:hover { border-color: var(--orange); color: var(--yellow); }

.rectangle-button__image { width: 100%; max-width: 200px; }
.rectangle-button__image--age-gate-submit {  }
.rectangle-button__image--learn-more {  }
.rectangle-button__image--where-to-buy {  }


.paragraph { font-family: var(--extended-bold) /*bulk-font-edit-5.45*/; color: var(--light-color); font-size: 18px; line-height: 1.3; margin-bottom: 1.3em; }


.no-wrap { white-space: nowrap; }

/* section dividers */

.section-divider { position: relative; height: 4px; overflow: hidden; z-index: 4; background: url('/img/dashed-line.svg') center left / 40px repeat-x; borders:solid 1px red; }

/* mac Safari (including in iPhones and iPads) can't see SVGs when used as repeating bg images (I guess? because this never shows up in Safari if it's an SVG [not on Macbook nor iPhone nor iPad], but DOES show properly if it's a PNG) */
body.user-is-on-mac .section-divider { background: url('/img/dashed-line.png?v=2') center left / 40px repeat-x; }

.section-divider__image { width: 300px; position: absolute; left: 0; /* inline CSS overrides the "left" rules to fix the 1px problem with these SVGs */ }

/*.section-divider__image--top-dark { width: var(--squiggle-width); position: absolute; top: 0; left: 0; }*/


@-webkit-keyframes rotating /* Safari and Chrome */ {
  from {
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
  to {
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}
@keyframes rotating {
  from {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
  to {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}
.rotating {
  -webkit-animation: rotating 20s linear infinite;
  -moz-animation: rotating 20s linear infinite;
  -ms-animation: rotating 20s linear infinite;
  -o-animation: rotating 20s linear infinite;
  animation: rotating 20s linear infinite;
}


@media only screen and (max-width: 700px)
{
  .section-divider--homepage-flower-vaporizers-pre-rolls-section { display: none; }
}





/* -------------------------------------------------------------------------- */
/* body
/* -------------------------------------------------------------------------- */

body {
  /*background-color: var(--violet);*/
  background: url('/img/bg-dark.jpg?v=2') center top / 22% repeat black;
  /*padding: 0 30px 0px;*/
   position: relative;  
}





/* -------------------------------------------------------------------------- */
/* nav
/* -------------------------------------------------------------------------- */


/* menu bar that shows the buttons; in the HTML this sits below but since we see it always I'm putting the CSS above */

.menu-bar { position: fixed; width: 100%; height: var(--menu-bar-height); /*max-width: 2000px;*/ top: 0; left: 0; right: 0; margin: auto; text-align: center; overflow: hidden; z-index: 11; display: flex; flex-flow: row nowrap; align-items: center; justify-content: center; borders:solid 1px red; padding: 0 var(--page-content-horizontal-padding) 0; background: #f1efd8; }

.menu-bar__menu-button { flex:  0 0 auto; font-family: var(--opti); font-size: 22px; /*position: fixed; top: 12px;*/ /* make sure this bottom-aligns with the ness logo on right side left: 100px; */  text-align: center; z-index: 12; display: flex; flex-flow: row wrap; /*transform: translateY(-60px); transition: transform .5s ease-in-out; */ displays: none; /* it hides at first, only shows if JS allows */ }

body.homepage .menu-bar__menu-button { transform: translateY(-50px); } /* on homepage, MENU is hidden by default (until JS reveals it) */

.menu-bar__special-message { flex: 1; font-family: var(--extra-bold); font-size: 17px; color: var(--dark-text-color); }
body:not(.homepage) .menu-bar__special-message { visibility: hidden; height: 0; } /* we usae visibility hidden so this still takes up space */

.menu-bar__special-message-text--shorter { display: none; }

.menu-bar__special-message-link { color: var(--orange); font-family: var(--extra-bold-underlined); }

.menu-bar__bzam-logo { flex: 0 0 128px; margin-top: 4px; /*position: fixed; top: 16px; *//* make sure this bottom-aligns with the MENU button on left side */ /*right: 100px;*/ width: 100px; text-align: center; z-index: 12; }
body.homepage .menu-bar__bzam-logo { transform: translateY(-50px); } /* on homepage, ness logo is hidden by default (until JS reveals it) */

.menu-bar__bzam-logo-image { max-width: 100%; }

@media only screen and (max-width: 1500px)
{
  .menu-bar { /*height: 44px;*/ }
  .menu-bar__menu-button { /* flex-basis: calc(105px); */ }
  .menu-bar__bzam-logo { /* flex-basis: calc(105px * .84); */ }
}
@media only screen and (max-width: 1180px)
{
  .menu-bar__special-message-text--longer { display: none; }
  .menu-bar__special-message-text--shorter { display: inline; }
}
@media only screen and (max-width: 1180px)
{
  .menu-bar__special-message { font-size: 16px; }
}
@media only screen and (max-width: 1120px)
{
  .menu-bar__special-message { font-size: 15px; }
}
@media only screen and (max-width: 1023px)
{
  .menu-bar__special-message { visibility: hidden; height: 0; } /* we use visibility hidden so this still takes up space */
}
@media only screen and (max-width: 600px)
{
  .menu-bar__menu-button { font-size: 19px; }
  .menu-bar__bzam-logo { flex-basis: 116px; }
}

/* nav part that  slides down */

.nav { position: fixed; width: 100%; /*max-width: 2000px;*/ top: 0; left: 0; right: 0; margin: auto; text-align: center; overflow: hidden; z-index: 12; height: 0; /*transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); will-change:top; background-attachment: fixed;*/ /*background: url(/img/nav__squiggle-bg.svg) repeat-x bottom center / var(--squiggle-width); padding-bottom: 20px; -webkit-backface-visibility: hidden;*/ /*border:solid 1px red;*/ }

.nav__bottom-row {
  display: flex;
  flex-flow: row nowrap;
  borders:solid 1px red;
  padding: 4px 30px;
  align-items: center;
  justify-content: center;
  background:
    url('/img/bg-layer/bg-layer-nav-top-left.svg?v=4') left top / 400px no-repeat,
    url('/img/bg-layer/bg-layer-nav-top-right.svg?v=4') calc(100% - 100px) top / 33% no-repeat,
    url('/img/bg-layer/bg-layer-nav-middle.svg?v=4') 36% 100% / 16% no-repeat,
    url('/img/bg-dark.jpg?v=2') center top / 22% repeat black;
}

.nav__bottom-row-inner { max-width: 76%; margin-top: 80px; text-align: left; padding-bottom: 56px; /* position: absolute;  top: 80px; display: flex; flex-flow: row nowrap; overflow: hidden; border:solid 1px red;*/ }

/* above top row content */

.nav__close { position: absolute; top: 70px; left: auto; right: 0; width: 260px; padding: 36px 60px 46px; text-align: center; z-index: 10; opacity: 0; /* js shows this when curtain reveals */ /*pointer-events: none;*/ font-family: var(--opti); font-size: 18px; color: var(--light-color); display: flex; align-items: center; justify-content: flex-end; gap: 16px; background: url('/img/bg-layer/bg-layer-nav-behind-close-button.png?v=1') center center / contain no-repeat; }
.nav__close-image { width: 30px; }


/* bottom row content */

.nav__grid { display: flex; gap: 10px; }



.nav__box { flex: 0 0 auto; /*border:solid 1px red;*/ }
.nav__box--discover { flex-basis: 18%; }
.nav__box--products { flex-basis: 32%; padding-top: 30px; padding-left: 10px; }
.nav__box--new-item { flex: 1; }

.nav__new-item { display: flex; height: 100%; flex-flow: row wrap; align-items: center; gap: 20px 20px; }
.nav__new-item-text { flex: 1; font-family: var(--extended-bold); font-size: 20px; color: #6acbb8; line-height: 1.7; display: flex; align-items: center; }
.nav__new-item-image-and-strain-name { flex: 0 0 60%; /*display: flex; flex-flow: row wrap; justify-content: center;*/ }


.nav__heading { font-family: var(--extended-bold-underlined); font-size: 23px; color: var(--light-color); margin-bottom: 1.2em; }

.nav__item { margin-bottom: 1.2em; }

.nav__link { font-family: var(--extended-bold); font-size: 20px; color: var(--light-color); }

.nav__new-item-strain-name { margin-top: -20px; max-width: 80%; margin-left: 10%; position: relative; z-index: 3; }

/* REMEMBER TO DELETE THE nav__panels STUFF SOON (written Sep 27 2022 at 8: 15pm) INCLUDING THE MEDIA QUERIES */

/*.nav__panels { display: flex; flex-flow: row nowrap; overflow: hidden; -webkit-transform: translate3d(0, 0, 0); }

.nav__panel { flex: 0 0 100%; -webkit-transform: translate3d(0, 0, 0); }
.nav__panel--products { text-align-last: left; display: flex; flex-flow: column nowrap; justify-content: space-between; padding: 12px 0; }

.nav__links-border-top,
.nav__links-border-bottom { width: 100%; }

.nav__links-divider { max-width: 100px; transition: transform .3s ease-out; }

.nav__link { display: block; margin: 12px 0; borders: solid 1px red; font-size: 32px; transition: transform .3s ease-out; }
.nav__link--return-to-main-nav { margin: 0 0 4px 0; position: relative; }

.nav__link:hover .nav__link-image { display: none; }
.nav__link:hover .nav__link-image-hovered { display: inline; }

.nav__link-image-hovered { display: none; }*/



/* the products stuff */
.nav__products { text-align: left; displays: none; transition: all .3s ease-out; }

/* the carousel of product-images */

.nav__product-panels { display: flex; flex-flow: row nowrap; overflow: hidden; margin-bottom: 4px; }

.nav__product-panel { flex: 0 0 100%; display: flex; flex-flow: row wrap; }

.nav__product-panel-image-container { position: relative; border: 1.5px solid var(--violet); }

.nav__product-panel-new-item { position: absolute; width: 16%; text-align: center; left: 20%; top: 10%; /*transform: translate(-50%, 0);*/ font-family: 'Jaunev0.6-GrandeBold'; color: var(--yellow); font-size: 1vw; letter-spacing: 1px; z-index: 2; }

.nav__product-panel-image { width: 100%; vertical-align: bottom; }

.nav__product-panel-toggle-button-container { display: flex; justify-content: center; gap: 4px; }
.nav__product-panel-toggle-button { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--yellow); background-color: var(--orange); margin-bottom: 6px; font-size: 0; /* needed to prevent iPhones from turning this into an oval */ }

[data-nav-product-panel-toggle-status="selected"] { background-color: var(--violet); }
[data-nav-product-panel-toggle-status=""]:hover { cursor: pointer; }

/* the links below that carousel */

.nav__products-link { align-self: flex-start; padding: 0px 0; display: flex; flex-flow: row nowrap; gap: 10px; font-size: 20px; font-family: "Jaune-GrandeBlack"; line-height: 1.2; color: var(--violet); align-items: center; }
.nav__products-link:hover { color: #b487b8; }
.nav__products-link:hover .nav__products-count-oval { border-color: #b487b8; }

.nav__products-text { padding-bottom: 4px; }

.nav__products-count { flex: 0; }
.nav__products-count-oval { /*background: url(/img/products__count-bg.svg) no-repeat center center / contain;*/ font-family: var(--extended-bold) /*bulk-font-edit-5.45*/; font-weight: bold; font-style: italic; font-size: 13px; flex: 0 0 100%; display: flex; align-items: center; justify-content: center; padding: 3px 11px 1px 7px; /* these need weird padding to appear centered */ border: 1px solid var(--violet); border-radius: 50%; width: 30px; height: 20px; }



@media only screen and (max-width: 2000px)
{
  .nav__close { /*width: calc(112px * .84); top: var(--page-content-horizontal-padding);*/ }
}

@media only screen and (max-width: 1500px)
{
  .nav__close { top: 20px; /*width: calc(105px * .84); top: var(--page-content-horizontal-padding);*/ }
}

@media only screen and (max-width: 1200px)
{
  .nav__bottom-row {
    background:
      url('/img/bg-layer/bg-layer-nav-top-left.svg?v=4') left top / 400px no-repeat,
      url('/img/bg-layer/bg-layer-nav-top-right.svg?v=4') calc(100% - 100px) top / 33% no-repeat,
      url('/img/bg-layer/bg-layer-nav-middle.svg?v=4') 46% 100% / 16% no-repeat,
      url('/img/bg-dark.jpg?v=2') center top / 22% repeat black;
  }

  .nav__close { width: 190px; padding: 30px 30px 40px; /*border:solid 1px red;*/ }

  /* change column widths to make best use of space now that we've stacked the new-item */
  .nav__box--discover { flex-basis: 22%; }
  .nav__box--products { flex-basis: 38%; }
  .nav__box--new-item { flex: 1; }
  .nav__new-item-image-and-strain-name { flex-basis: 100%; }
  .nav__new-item-text { flex-basis: 100%; display: block; text-align: center; line-height: 1.3; }
}

@media only screen and (max-width: 1000px)
{
  .nav__close { top: 10px; width: 180px; padding: 23px 30px 27px; }
  .nav__close-image { width: 26px; }

  /*.nav__link { font-size: 20px; }*/
  .nav__new-item-text { font-size: 18px; }
}

@media only screen and (max-width: 959px)
{

  /* change the BG image sizing so it doesn't make text illegible */
  .nav__bottom-row {
    background:
      url('/img/bg-layer/bg-layer-nav-top-left.svg?v=4') left top / 300px no-repeat,
      url('/img/bg-layer/bg-layer-nav-top-right.svg?v=4') calc(100% - 100px) top / 40% no-repeat,
      url('/img/bg-layer/bg-layer-nav-middle.svg?v=4') 46% 100% / 16% no-repeat,
      url('/img/bg-dark.jpg?v=2') center top / 22% repeat black;
  }

  /* variable text size so we can stick with three cols until mobile */
  .nav__link { font-size: 2.04vw; }
  .nav__new-item-text { font-size: 1.9vw; }

}

@media only screen and (max-width: 767px)
{
  .nav__close { top: 2px;  }
  
  /* change the BG image sizing so it doesn't make text illegible */
  .nav__bottom-row {
    background:
      url('/img/bg-layer/bg-layer-nav-top-left.svg?v=4') left top / 240px no-repeat,
      url('/img/bg-layer/bg-layer-nav-top-right.svg?v=4') calc(100% - 100px) top / 40% no-repeat,
      url('/img/bg-layer/bg-layer-nav-middle.svg?v=4') 50% 100% / 16% no-repeat,
      url('/img/bg-dark.jpg?v=2') center top / 22% repeat black;
  }

  .nav__bottom-row-inner { max-width: 86%; padding-bottom: 20px; }

  /* change column widths to make best use of space now that we've shrunk bg image */
  .nav__box--discover { flex-basis: 22%; }
  .nav__box--products { flex-basis: 38%; }
  .nav__box--new-item { flex: 1;  }
  
  /* new item in column now so we can space it better */
  .nav__new-item { flex-flow: column; gap: 10; justify-content: center; }
  .nav__new-item-image-and-strain-name { flex: 0 0 auto; }
  .nav__new-item-text { flex: 0 0 auto; display: block; text-align: center; line-height: 1.3; margin-top: -8px; }

  .nav__link { font-size: 2.4vw; }
}

@media only screen and (max-width: 600px)
{
  .nav__bottom-row {
    paddings: 0;
    background:
      url('/img/bg-layer/bg-layer-nav-top-left--mobile.png?v=4') left 30px / 70px no-repeat,
      url('/img/bg-layer/bg-layer-nav-middle.svg?v=4') right 100% / 160px no-repeat,
      url('/img/bg-dark.jpg?v=2') center top / 22% repeat black;
  }
  .nav__bottom-row-inner { max-width: min(86%, 200px); margin-top: 100px; padding-bottom: 50px; }

  /* this is the "x" button for mobile */
  /*[data-nav-content="expanded"] */.nav__close { top: 10px; /*display: block;*/ widths: 30px; /*opacity: 1;*/ pointer-events: auto; }

  /*[data-nav-content="collapsed"] .nav__close { opacity: 0; transition: opacity 1.2s; }*/

  .nav__grid { flex-wrap: wrap; }  

  .nav__box { flex-basis: 100%; }
  .nav__box--products { padding-top: 10px; padding-left: 0; }
  .nav__box--new-item { display: none; }
  
  .nav__link { font-size: 16px; }
  .nav__products-link { font-size: 16px; }

  .nav__close_____ { widths: 30px; top: var(--page-content-horizontal-padding); right: var(--page-content-horizontal-padding); }
  .nav__close-image { widths: 100%; }
}

@media only screen and (max-height: 660px)
{
  /* make nav scrollable when browser is this short */
  .nav__bottom-row { /*overflow-y: auto;*/ align-items: flex-start; max-height: 100vh; }
}




/* -------------------------------------------------------------------------- */
/* page container
/* -------------------------------------------------------------------------- */

.page-container { margin: 0 auto; /*max-width: calc(100% - 60px);*/ /*max-width: 2000px;*/ background: url('/img/bg-dark.jpg?v=2') center top / 22% repeat black; }

body.about-page .page-container { overflow: hidden; }

/* when nav showing, we blur the page */
[data-page-container-overlay] {
  position: absolute;
  z-index: 10;
  left: 0;
  top: -40px; /* not sure why this is needed, but it is (see the companion part in this elements rules) */
  right: 0;
  bottom: 0;
  /*background: black;*/
  background: rgba(225,231,51,0);
  backdrop-filter: blur(0px);
  -o-backdrop-filter: blur(0px);
  -ms-backdrop-filter: blur(0px);
  -moz-backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  width: calc(100vw);
  height: calc(0 + 40px); /* not sure why this is needed, but it is (see the companion part in this elements rules) */
  transition: all .5s ease-out;
  pointer-events: none;
}

[data-page-container-overlay="blurred"] {
  width: calc(100vw);
  height: calc(100% + 40px); /* not sure why this is needed, but it is (see the companion part in this elements rules) */
  background: rgba(225,231,51,0.5);
  backdrop-filter: blur(6px);
  -o-backdrop-filter: blur(6px);
  -ms-backdrop-filter: blur(6px);
  -moz-backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/*
@media only screen and (min-width: 2061px)
{
  .page-container { max-width: calc(2000px - 60px); background: var(--violet); }
}
*/







/* -------------------------------------------------------------------------- */
/* whatcha (the bigger floating button that toggles the nav that we only see sometimes) and stamp graphic
/* -------------------------------------------------------------------------- */

.menu-arrow { display: block; position: absolute; top: 56px; left: 44px; /*var(--page-content-horizontal-padding);*/ width: clamp(90px, 7vw, 130px); text-align: center; z-index: 10; }
.menu-button--close { position: absolute; } /* this one is in a div that's already fixed so it only needs to be absolutely positioned to line up perfectly with the "open" version */


.menu-button__image { width: 100%; /*margin-bottom: 10px;*/ }
.menu-button__image--close { width: 28%; margin-bottom: 9px; } /* if you change either of these numbers then the "WHA'CHA" image might not line up properly with the pre-closing state */
/*.menu-button__open-or-close-button { display: inline-block; width: 30px; margin-bottom: 10px; }*/


/* stamp  */

.available-at { display: block; position: absolute; top: 56px; right: 44px; /*var(--page-content-horizontal-padding);*/ width: clamp(90px, 7vw, 130px); text-align: center; z-index: 10; }


@media only screen and (max-width: 2000px)
{
  /* these are tied to JS rules, so don't change this or the max-width above w/o changing JS too */
  .menu-arrow { top: 56px; }
  .available-at { top: 56px; }
}

@media only screen and (max-width: 1500px)
{
  /* these are tied to JS rules, so don't change this or the max-width above w/o changing JS too */
  .menu-arrow { top: 56px; }
  .available-at { top: 56px; }
}

/*
unhide the below when we stop using the Pumpkin Spice promo video

@media only screen and (max-width: 767px)
{
  .menu-arrow { width: 74px; }
  .available-at { width: 74px; }
}
*/


/* change this max-width back to 600px when we stop using the Pumpkin Spice promo video */

@media only screen and (max-width: 959px)
{
  .menu-arrow--open { display: none; }
  .menu-button--close { display: none; }

  /*[data-nav-content="collapsed"] .menu-button--close { opacity: 0; transition: 'none'; display: none; }*/ /* force this to be collapsed always  */
  
  .menu-button__image--close { width: 100%; }
  /*.menu-button__whatcha-image { display: none; }*/


  .available-at { display: none; }
}





/* -------------------------------------------------------------------------- */
/* homepage hero
/* -------------------------------------------------------------------------- */

.hero { /* width: 100%; height: calc(var(--page-container-width) / 1.777777); background: url(/img/hero__bg.jpg?v=5) center top no-repeat; background-size: cover; display: flex; flex-flow: row wrap; justify-content: flex-end; */ position: relative; overflow: hidden; height: 56vw; margin-top: 36px; }


/*.new { margin: clamp(46px, calc(3vw + 10px), 100px) 0 40px; padding: 0 var(--page-content-horizontal-padding); } */

.hero__panels { display: flex; flex-flow: row nowrap; overflow: hidden; /*max-width: 2200px;*/ margin: auto; }

.hero__panel { flex: 0 0 100%; height: 56vw; display: flex; flex-flow: row wrap; align-items: center; justify-content: center; /* begin test code for mar-13-2023 - unhide if you need to show numbers in panels for quicker testing */ /*font-size: 40px; color: white; */ /* end test code for mar-13-2023 */ }

.hero__toggle-button-container { position: absolute; bottom: 20px; left: 0; width: 100%; height: 20px; display: flex; justify-content: center; gap: 20px; }
.hero__toggle-button { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--light-color); background: none; font-size: 0; /* needed for iPhones, because otherwise iOS sets a font-size of 11 here which turns these circles into ovals */ }

[data-hero-panel-toggle-status="selected"] { background-color: var(--light-color); }
[data-hero-panel-toggle-status=""]:hover { cursor: pointer; }


.hero__video { /*position: absolute; top: 100%; left: 100%;*/ min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: 0; /*transform: translate(-100%, -100%);*/ /*width: 100%;*/ }
.hero__video--mobile { display: none; }
.hero__video--mp4 { width: 100%; background-color: var(--violet); }

.hero__image { width: 100%; vertical-align: bottom; }
.hero__image--mobile { display: none; }

.hero__image-mobile { width: 100%; vertical-align: bottom; display: none; }

@media only screen and (max-width: 2000px)
{
  .hero__toggle-button { width: 13.5px; height: 13.5px; }
}
@media only screen and (max-width: 1299px) and (min-width: 960px)
{
  .hero__image--desktop { width: 92%; }
}
@media only screen and (max-width: 1099px) and (min-width: 960px)
{
  .hero__image--desktop { width: 88%; }
}

@media only screen and (max-width: 1024px)
{
  
  /* if we want to hide the video and show the image instead on mobile, unhide this
  hero { height: auto; }
  .hero__video { display: none; }
  .hero__image-mobile { display: block; }*/


  .hero_______HIDDEN-aug-30-2022 { height: 70vw; }
  .hero__video_______HIDDEN-aug-30-2022 { min-width: 170%; min-height: 170%; margin-left: -36%; /* products look more centered if we move a bit further left */ margin-top: -35%; }
}

@media only screen and (max-width: 959px)
{
  .hero__image--desktop { transform: translateY(-3%); } /* prevent the bottom of this JPG from being overlapped by the three-dots buttons */
}

@media only screen and (max-width: 600px)
{
  
  /* if we want to hide the video and show the image instead on mobile, unhide this
  hero { height: auto; }
  .hero__video { display: none; }
  .hero__image-mobile { display: block; }*/

  .hero__video--desktop { display: none; }
  .hero__video--mobile { display: inline; padding-bottom: 40px; }

  .hero__image--desktop { display: none; }
  .hero__image--mobile { display: inline; padding-bottom: 40px; transform: translateY(-1.8%); /* needed to visually-center this in its space */ /*transform: translateY(-4.2%);*/ /* needed to make the "HOW'S YOUR" text line up vertically with top-text on the videos */ }


  .hero { height: 177vw; backgrounds: red; margin-top: 46px; borders:solid 1px purple; } /* would rather use margin-top of 36px but that doesn't work in all scenarios */
  .hero__panel { height: 177vw; }
  .hero__panel--contains-image-instead-of-video { background: #000; }
  .hero__video { /*min-width: 106%; min-height: 106%; margin-left: -3%; margin-top: -3%;*/ } /* magic numbers for the pumpkin spice video to not show its borders behind the top OR bottom waves at any browser-width/device */
  /*.hero__video { min-width: 300%; min-height: 300%; margin-left: -106%; margin-top: -140%; }*/ /* hidden right now because this is only for the "original" video, not the pumpkin spice one products look more centered this way than actually centering the video */
  .hero__video--mobile-2 { /*min-width: 103%; min-height: 103%; margin-left: -1.5%; margin-top: -1.5%;*/ }

  .hero__toggle-button-container { bottom: 20px; }
}




/* -------------------------------------------------------------------------- */
/* just ("Just take me to your weed")
/* -------------------------------------------------------------------------- */

.just { display: flex; flex-flow: row wrap; align-items: stretch; padding: 0 var(--page-content-horizontal-padding); }
.just--homepage { padding: 12px var(--page-content-horizontal-padding) 12px; z-index: 4; position: relative; }
.just--individual-product-page { padding: calc( var(--menu-bar-height) + 12px ) var(--page-content-horizontal-padding) 12px; z-index: 2; position: relative; }

.just__heading { position: relative; borders:solid 1px green; flex: 0 0 min(16%, 360px); height: 150px; /*background: url(/img/just__circle.svg) no-repeat center center / cover;*/ margin-right: 4%; align-self: center; }

.just__heading-circle,
.just__heading-text { position: absolute; width: 100%; top: 50%; transform: translate(0, -50%); text-align: center; color: var(--yellow); font-family: 'Jaune-GrandeBlack'; font-size: clamp(17px, 1.2vw, 30px); }

.just__heading-text { padding: 0 18px; }

@media only screen and (max-width: 1200px)
{
  .just__heading-text { padding: 0 10%; font-size: 1.2vw; }
}

@media only screen and (max-width: 1000px)
{
  .just { /*margin-top: -10px;*/ }
  .just__heading { display: none; }
}





/* -------------------------------------------------------------------------- */
/* strain-carousel (used on multiple pages)
/* -------------------------------------------------------------------------- */

.strain-carousel,
.strain-carousel__panels,
.strain-carousel__panels-slider { display: flex; flex-flow: row wrap; }

.strain-carousel-container { padding: 65px var(--page-content-horizontal-padding) 30px; z-index: 2; position: relative; } /* this is only on the subpages, because the ".just" div is the carousel's container on homepage */

.strain-carousel { borders:solid 1px green; flex: 1; }
.strain-carousel--individual-product-page { opacity: 0; /* hide this until JS determines we're ready to show it, because we might have to shift it first and that looks janky if it's not hidden first */ }

.strain-carousel__arrow-container,
.strain-carousel__panel { display: flex; align-items: center; justify-content: center; }

.strain-carousel__panel { flex-flow: column nowrap; justify-content: center; backgrounds: grey; border-lefts: 1px solid red; }

.strain-carousel__arrow-container { borders: solid 1px purple; flex: 0 0 clamp(30px, 4.2%, 50px); }

[data-carousel-arrow] { transition: transform .1s ease-out; }
[data-carousel-arrow-status="disabled"] { opacity: .4; }
[data-carousel-arrow-status="enabled"] { box-shadow: 0 0 3px 3px rgba(0,0,0,0.1); /*border-radius: 50%;*/ }
[data-carousel-arrow-status="enabled"]:hover { cursor: pointer; transform: scale(1.1); }

.strain-carousel__panels { /*border: solid 1px orange;*/ flex: 1; flex-wrap: nowrap; overflow: hidden; }
.strain-carousel__panels-slider { /*border: solid 1px teal;*/ flex: 1; flex-wrap: nowrap; transition: transform .5s; position: relative; }

.strain-carousel__panel { /*border: solid 1px blue;*/ flex: 0 0 20%; paddings: 20px; position: relative; z-index: 2; }
.strain-carousel__status { position: absolute; width: 100%; text-align: center; /*left: 50%;*/ tops: 24%; transform: translateY(-280%); /* JS takes over and makes this more accurate, but this is still here so that on pageload it's not super ugly */ font-family: var(--extended-extra-bold-underlined); color: var(--light-color); font-size: 24px; letter-spacing: 1px; z-index: 2; opacity: 0; /* JS shows this after it sets proper vertical positioning */ transition: opacity .2s; }
.strain-carousel__status--coming-soon { font-size: 22px;  }
[data-strain-carousel-status="hidden"] { display: none; }

.strain-carousel__image { position: absolute; width: 74%; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2}

.strain-carousel__hidden-flower-bg-image { visibility: hidden; }

.strain-carousel__hover-bg { width: 0; /* to prevent it from being huge when page loads because JS can't size this right away */ visibility: hidden; opacity: 0; position: absolute; z-index: 1; margin: auto; top: 0; bottom: 0; display: flex; align-items: center; justify-content: center; }
.strain-carousel__hover-bg-image { width: 90%; -webkit-animation: rotating 20s linear infinite; -moz-animation: rotating 20s linear infinite; -ms-animation: rotating 20s linear infinite; -o-animation: rotating 20s linear infinite; animation: rotating 20s linear infinite; }

.strain-carousel__panel:hover .strain-carousel__hover-bg-image { visibility: visible; }

[data-just-carousel-panel="1"] { backgrounds: red; }
[data-just-carousel-panel="2"] { backgrounds: blue; }
[data-just-carousel-panel="3"] { backgrounds: red; }
[data-just-carousel-panel="4"] { backgrounds: blue; }
[data-just-carousel-panel="5"] { backgrounds: red; }
[data-just-carousel-panel="6"] { backgrounds: blue; }
[data-just-carousel-panel="7"] { backgrounds: red; }

.strain-carousel__panel { flex-basis: calc(100% / 7); }

[data-carousel-max-panels-to-show="3"] .carousel__panel--homepage { flex-basis: calc(100% / 4); }
[data-carousel-max-panels-to-show="3"] .carousel__panel--products-page { flex-basis: calc(100% / 4); }

@media only screen and (max-width: 2600px)
{
  .strain-carousel__panel { flex-basis: calc(100% / 6); }

  .strain-carousel__status { transform: translateY(-260%); font-size: 22px; }
  .strain-carousel__status--coming-soon { font-size: 20px; }

  [data-carousel-max-panels-to-show="3"] .carousel__panel--homepage { flex-basis: calc(100% / 3); }
  [data-carousel-max-panels-to-show="3"] .carousel__panel--products-page { flex-basis: calc(100% / 3); }
}

@media only screen and (max-width: 2000px)
{
  .strain-carousel__panel { flex-basis: calc(100% / 5); }
}

@media only screen and (max-width: 1400px)
{
  .strain-carousel__status { transform: translateY(-200%); }
}
@media only screen and (max-width: 1100px)
{
  .strain-carousel__status { font-size: calc(1.9vw + 2px); tops: calc(17%); }
  .strain-carousel__status--coming-soon { font-size: calc(1.7vw + 2px); }
}

@media only screen and (max-width: 900px)
{
  [data-carousel-max-panels-to-show="3"] .carousel__panel--homepage { flex-basis: calc(100% / 2); }
  [data-carousel-max-panels-to-show="3"] .carousel__panel--products-page { flex-basis: calc(100% / 2); }
}

@media only screen and (max-width: 800px)
{
  .strain-carousel__panel { flex-basis: calc(100% / 4); }
}

@media only screen and (max-width: 600px)
{

  [data-carousel-max-panels-to-show="3"] .carousel__panel--homepage { flex-basis: calc(100% / 1.333333); }
  [data-carousel-max-panels-to-show="3"] .carousel__panel--products-page { flex-basis: 100%; }


  /* strain carousels; hide arrows, make it scrollable, etc */
  .just { padding-right: 0; }
  .just--individual-product-page { margin-bottom: 10px; }

  .strain-carousel__arrow-container { display: none; }
  .strain-carousel__panels-slider { overflow-x: scroll; overflow-y: hidden; transform: translateX(0) !important; /* needed because the JS might have set this to a negative number to slide this slider, but at this browser-width we want the sider at positon zero because now we scroll it instead of sliding it */ }
  .strain-carousel__panel { flex-basis: calc(100% / 2.5); margin-bottom: -5%; /* otherwise looks like too much space below, especially when scrollbar showing */ }

  .strain-carousel__status { font-size: calc(3.1vw + 2px); tops: calc(22%); }
  .strain-carousel__status { font-size: calc(2.7vw + 2px); tops: calc(22%); }


  /* the subpages carousel container (on homepage, .just is the carousel container) */
  .strain-carousel-container { padding: 75px 0 50px var(--page-content-horizontal-padding); }

  /* scrollbar styling */
  /* width/height */
  .strain-carousel__panels-slider::-webkit-scrollbar { width: 9px; height: 9px; /*border-radius: 5px;*/ }
  /* track */
  .strain-carousel__panels-slider::-webkit-scrollbar-track { background: rgba(70,70,70,80%); /*border-radius: 5px;*/ }
  /* handle */
  .strain-carousel__panels-slider::-webkit-scrollbar-thumb { background: var(--yellow); /*border-radius: 5px;*/ }
  /* handle on hover */
  .strain-carousel__panels-slider::-webkit-scrollbar-thumb:hover { background: var(--yellow-light); width: 20px; }
  

}




/* -------------------------------------------------------------------------- */
/* new ("New product alert")
/* -------------------------------------------------------------------------- */

.new { margin: clamp(46px, calc(3vw + 10px), 100px) 0 clamp(56px, calc(3vw + 15px), 110px) /*clamp(40px, 12vw, 60px)*/; padding: 0 var(--page-content-horizontal-padding); /*background: url(/img/new__bg.svg) no-repeat center center / 100%;*/ position: relative; z-index: 4; /* this z-index must be higher than the div below (.big-card--flower in this case) AND the div below's :after */ }

.new__panels { display: flex; flex-flow: row nowrap; overflow: hidden; /*max-width: 2200px;*/ margin: auto; }

.new__panel { flex: 0 0 100%; display: flex; flex-flow: row wrap; }

/*[data-new-panel="1"] .strain-hero__image { transform: translateX(-100%); transition: transform .2s; }
[data-strain-hero-image-container="actual"] .strain-hero__image { transform: translateX(0px); transition: transform .2s; }*/

.new__image-container { flex: 1; borders:solid 1px red; padding: 3% 0; display: flex; flex-flow: column nowrap; justify-content: center; }
/*.new__content-container { flex: 1; borders:solid 1px red; padding: 5% 0 5% 5%; }*/

.new__product-image { width: 100%; }

.new__text { font-size: clamp(20px, 3.5vw, 80px); line-height: 1.1; font-family: 'Jaune-GrandeBlack'; color: var(--yellow); margin-bottom: 50px; }

.new__learn-more-button {  }
.new__learn-more-button:hover { cursor: pointer; }

.new__toggle-button-container { display: flex; justify-content: center; gap: 20px; }
.new__toggle-button { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--yellow); background-color: var(--orange); font-size: 0; /* needed for iPhones, because otherwise iOS sets a font-size of 11 here which turns these circles into ovals */ }

[data-new-panel-toggle-status="selected"] { background-color: var(--yellow); }
[data-new-panel-toggle-status=""]:hover { cursor: pointer; }


@media only screen and (max-width: 1500px)
{
  .new { margin: clamp(20px, calc(2vw), 60px) 0 clamp(40px, 4vw, 90px); }
}

@media only screen and (min-width: 601px)
{

}

@media only screen and (max-width: 600px)
{
  .new { margin: 56px 0 56px; }
  .new__image-container { padding: 0; }
  
  /*.new__image-container { flex-basis: 100%; }
  .new__content-container { flex-basis: 100%; padding: 40px 0 40px; text-align: center; }

  .new__text { font-size: clamp(28px, 8vw, 40px); margin-bottom: 26px; }*/


}




/* -------------------------------------------------------------------------- */
/* big-card ("FLOWER", "VAPORIZERS", "RRE-ROLLS")
/* -------------------------------------------------------------------------- */

.big-card { margin: 120px 0 60px; padding: 0 var(--page-content-horizontal-padding); position: relative; /* so the layered-bgs position themselves properly and so we can apply z-index to these */ }
.big-card--king-size { /*margin-top: 0;*/ /* made this change on apr-15-2024, because, now that there's no featured section, this should follow basically the same margin rules as the other big-card secitons */ z-index: 3; }

.big-card__inner { display: flex; flex-flow: row wrap; background: url(/img/big-card__bg.svg) no-repeat center center / cover; position: relative; z-index: 4; }

.big-card__content-container { flex: 1; border: 1px solid var(--light-color); border-right: none; text-align: center; padding: 10px 0 10px; /*background-color: var(--violet-light);*/ display: flex; flex-flow: row wrap; justify-content: center; align-content: center; }
.big-card__content-container--reversed-order { order: 2; border-right: 1px solid var(--light-color); }

.big-card__visuals-container { flex: 1 1 auto; max-width: calc(50% + .5px); /* extra px because of the border on this div that's not on the other div; this keeps it perfectly centered aka the inside of this div will always be identical to the inside of the div beside it */ border: 1px solid var(--light-color); position: relative; overflow: hidden; /*aspect-ratio: 1200 / 1060;*/ }
.big-card__visuals-container--reversed-order { order: 1; max-width: calc(50% - .5px); /* less px because of the border on the other div in this case (that's not on this div); this keeps it perfectly centered aka the inside of this div will always be identical to the inside of the div beside it */ border-right: none; }
.big-card__visuals-container--flower { backgrounds: url(/img/big-card__flower.gif?v=6) no-repeat center center / cover; }
.big-card__visuals-container--vaporizers { backgrounds: url(/img/big-card__vaporizers.gif?v=6) no-repeat center center / cover; }
.big-card__visuals-container--pre-rolls { backgrounds: url(/img/big-card__pre-rolls.gif?v=6) no-repeat center center / cover; }
.big-card__visuals-container--limited-release { aspect-ratio: 1; /* this needs the aspect-ratio because all other visuals-container divs contain GIFs that will automatically grow height-wise as they get wider, but since this is an iframe video it won't, and it's a perfectly-square video so ptuting this aspect ratio of 1 keeps this box as a perfect square when browser is super wide; when browser is narrower, we need the tricks below to keep this as a perfect square */ }

/* left col contents */

.big-card__heading-image { width: 100%; /*height: min( calc(4vw - 4px), 80px );*/ padding: 0 40px; }

.big-card__text { margin: 40px 40px; font-size: 16px; font-family: var(--xrx-bold); color: var(--light-color);  line-height: 1.3;}
.big-card__text--limited-release { max-widths: 550px; /* causes button to slip to side sometimes, so needs an inner div or other fix */ }

.big-card__button-container { width: 100%; margin: 0 40px;}

.big-card__text-underlined { text-decoration: underline; }


.big-card__button { /*margin-top: 20px;*/ max-width: 200px; display: inline-block; }

/* right col contents */

.big-card__gif { width: 100%; vertical-align: bottom; displays: none; /*border:solid 1px red;*/ }
.big-card__hero-video { position: absolute; top: 0; left: 0; bottom: 0; right: 0 ; margin: auto;  }


@media only screen and (max-width: 1400px)
{
  .big-card--king-size { margin-top: clamp(30px, 6vw, 80px); }

  .big-card__heading-image { width: 90%; }
}

@media only screen and (max-width: 1260px)
{
  .big-card__heading-image { width: 80%; }
  .big-card__text { margin: 2.4vw 2vw; }
}

@media only screen and (max-width: 1160px)
{
  .big-card__heading-image { max-width: 70%; }
  .big-card__text { margin: 2vw 2vw; }
  .big-card__button { max-width: 180px; }
}

@media only screen and (max-width: 1000px)
{
  .big-card__heading-image { width: 90%; }
  .big-card__text { margin: 2vw 2vw; font-size: 15px; }

  .big-card__button { max-width: 150px; }
}

@media only screen and (max-width: 960px)
{
  .big-card__text { font-size: 14px; margin: 2vw 2vw; }
}

@media only screen and (max-width: 900px)
{
  .big-card__text { font-size: 14px; margin: 1.6vw 2vw; }
}


@media only screen and (max-width: 830px)
{
  .big-card__text { font-size: 13px; line-height: 1.25; }
}

@media only screen and (min-width: 768px)
{
  .big-card--flower:before,
  .big-card--king-size:before { 
    content: "";
    position: absolute;
    top: -38%;
    left: 0;
    width: 36%;
    height: 100%;
    background: url(/img/bg-layer/bg-layer-square-tilted-dots-space-on-right-smaller.png) no-repeat left top / contain;
    z-index: 2;
    /* filter: opacity(.5); */
  }
  .big-card--vaporizer:before { 
    content: "";
    position: absolute;
    bottom: -39%;
    left: 0;
    width: 26%;
    height: 100%;
    background: url(/img/bg-layer/bg-layer-square-tilted-dots-space-on-right-smaller.png) no-repeat left bottom / contain;
    z-index: 2;
    /* filter: opacity(.5); */
  }
  .big-card--dunkd:before { 
    content: "";
    position: absolute;
    top: -19%;
    left: 0;
    width: 46%;
    height: 100%;
    background: url(/img/bg-layer/bg-layer-rectangle-horizontal-tilted-dots-space-on-right.png) no-repeat left top / contain;
    z-index: 2;
    /* filter: opacity(.5); */
  }
  .big-card--limited-release:before,
  .big-card--hash:before,
  .big-card--pre-roll:before { 
    content: "";
    position: absolute;
    top: -16%;
    right: 9%;
    width: 60%;
    height: 100%;
    /*background: url(/img/bg-layer/bg-layer-rectangle-horizontal-level-dots.png) no-repeat left top / contain;*/
    background: url(/img/bg-layer/bg-layer-rectangle-horizontal-level-grid.png) no-repeat left top / contain;
    /*background: url(/img/bg-layer/bg-layer-rectangle-horizontal-level-grid-space-on-right.png) no-repeat left top / contain;*/
    z-index: 2;
    /* filter: opacity(.5); */
  }
}

@media only screen and (max-width: 767px)
{
  .big-card { margin: 56px 0 10px; padding-left: 0; padding-right: 0; }
  .big-card--king-size { margin-top: 30px; }
  
  .big-card__content-container { order: 2; flex-basis: 100%; border: none; border-bottom: 1px solid var(--light-color); padding: 34px 0; margin-bottom: 30px; }
  .big-card__visuals-container { order: 1; flex-basis: 100%; max-width: unset; border-left: none; border-right: none; }

  .big-card__text { margin: 30px 8vw; font-size: 16px; line-height: 1.3; }
  .big-card__button-container { margin: 0 8vw; }
  .big-card__button { max-width: 200px; }
}




/* -------------------------------------------------------------------------- */
/* product carousel (used in multiple places on homepage)
/* -------------------------------------------------------------------------- */

/* flex stuff  */
:root
{
  --carousel-violet-flower-top-height: 50px;
  --carousel-panel-strain-name-font-size: clamp(26px, 1.7vw, 40px); /* see that this is identical to the below but everything below is 70% sized? if you adjust any of these, adjust the ones below too, and do the respnosiveness at bottom of this section; in the @medias I don't use this root stuff but instead go by class-names */
  --carousel-panel-strain-name-heading-part-font-size: clamp(calc(26px * .7), calc(1.7vw * .7), calc(40px * .7)); /* see that this is identical to the above but everything's 70% sized? if you adjust any of these, adjust the ones above too */
  
}

/*.product-carousel,*/
.carousel,
.carousel__slider-container,
.carousel__slider { display: flex; flex-flow: row wrap; }

.carousel__arrow-container,
.carousel__panel,
.carousel__panel-inner,
.carousel__panel-additional-info-thc,
.carousel__panel-additional-info-type { display: flex; align-items: center; justify-content: center; }

/*.carousel__panel,*/
.carousel__panel-inner { flex-flow: column nowrap; justify-content: center; }

/* non-flex */

.carousel { /*margin: 0 80px; padding: 60px 80px; align-items: center;  width: calc(100% - 60px); */ width: 100%; /* this is 92px because each arrow takes 42px plus there's 4px padding on each side of each panel so it's 42*2 + 4*2 */ margin: 0 auto; position: relative; }
.carousel--homepage { margin-bottom: var(--vertical-margin-between-carousels); } /* on homepage we do want some margin below the carousels */
.carousel--products-page { width: calc( 100% - ( var(--page-content-horizontal-padding) * 2 - 8px) ); margin-bottom: var(--negative-vertical-margin-between-carousels); } /* so that the carousels are closer vertically on products pages; need this because carousels have hidden stuff below/above (that gets revealed on hover) that takes up vertical space but since it usually isn't visible it takes up too much space; if you change this, change the .products margin-bottom accordingly */

.carousel__heading { position: relative; borders:solid 1px green; flex: 0 0 14%; height: 150px; /*background: url(/img/product-carousel__circle.svg) no-repeat center center / cover;*/ margin-right: 5%; }

.carousel__heading-circle,
.carousel__heading-text { position: absolute; width: 100%; top: 50%; transform: translate(0, -50%); text-align: center; color: var(--yellow); font-family: 'Jaune-GrandeBlack'; font-size: 14px; }

.carousel__heading-text { padding: 0 18px; }

@media only screen and (max-width: 1200px)
{
  .carousel__heading-text { padding: 0 10%; font-size: 1.2vw; }
}

.carousel__carousel { borders:solid 1px green; flexs: 1; margin: 0 30px; }

.carousel__arrow-container { borders: solid 1px purple; flex: 0 0 42px; z-index: 2; }
.carousel__arrow-container--left-and-overlapping { /*transform: translateX(calc(50% + 4px));*/ z-index: 2; }
.carousel__arrow-container--right-and-overlapping { /*transform: translateX(calc(-50% - 4px));*/ z-index: 2; }

.carousel__arrow-container-inner { width: 100%; }

.carousel__arrow { width: 100%; }


[data-carousel-arrow] { transition: transform .1s ease-out; }
[data-carousel-arrow-status="enabled"] { box-shadow: 0 0 3px 3px rgba(0,0,0,0.1); /*border-radius: 50%;*/ }
[data-carousel-arrow-status="enabled"]:hover { cursor: pointer; transform: scale(1.1) translate(inherit, inherit); }


.carousel__slider-container { borders: solid 1px orange; flex: 1; flex-wrap: nowrap; overflow: hidden; overflow-y: visible; max-widths: 100%; /*padding-top: var(--carousel-violet-flower-top-height);*/ position: relative; z-index: 4; }
.carousel__slider-container--homepage { margin: 0 calc(var(--page-content-horizontal-padding) - (46px)); }
.carousel__slider-container--products-page { flex-wrap: wrap; flex-basis: 100%; }
.carousel__slider { /*border: solid 1px teal;*/ flex: 1; flex-wrap: nowrap; align-items: flex-start; transition: transform .5s; max-width: 100%; }
.carousel__slider--products-page { flex-wrap: wrap; }

.carousel__panel { borders: solid 1px blue; flex-grow: 0; flex-shrink: 0; /* calc(100% / 3);*/ position: relative; padding: 0 4px 4px 4px; flex-flow: row wrap; z-index: 2; justify-content: flex-start; }
.carousel__panel_____::before {
  content: "";
  position: relative;
  width: 20%;
  height: 100px;
  background: url('/img/latest-drop.svg') no-repeat left top / 100%;
  background-size: contain;
  z-index: 3;
  margin-left: 10%;
  margin-bottom: -30px;
  border: solid 1px red;
  /*filter: opacity(.5);*/
}

.carousel__voilet-flower-top { position: absolute; top: 0; /*max-height: var(--carousel-violet-flower-top-height);*/ transition: transform .3s; /*display: none;*/ }

.carousel__latest-drop { width: 30%; margin-left: 4%; margin-bottom: -5%; z-index: 2; }

.carousel__panel-image-container { border: solid 1px rgba(0 0 0 / 0%); flex: 0 0 100%; width: 100%; paddings: 20px; position: relative; /*overflow: hidden;*/ z-index: 1; }
.carousel__panel-image-container:hover { border: solid 1px var(--light-color); }
.carousel__panel-pre-hover-image { z-index: 2; position: relative; transition: opacity .3s; }
.carousel__new-item-or-latest-drop { position: absolute; width: 22%; text-align: center; left: 14%; top: 1%; /*transform: translate(-50%, 0);*/ font-family: 'Jaunev0.6-GrandeBold'; color: var(--yellow); font-size: 1vw; letter-spacing: 1px; z-index: 2; }
.carousel__new-item-or-latest-drop--latest-drop { left: 6%; top: 6%; }
.carousel__image { /*position: absolute; width: 64%; left: 50%; top: 50%; transform: translate(-50%, -50%);*/ width: 100%; vertical-align: bottom; z-index: 2; transition: transform .3s ease-out; /*transform: translateY(-100px)*/ z-index: 2; borders:solid 1px red; }
.carousel__image--hovered { position: absolute; top: 0; z-index: 1; displays: none; /* these should only show to hover-enabled devices (devices with mice) */ /*margin-top: -1px;*/ /* if you change this, update the JS where we "set the image-container height" */ }

/*.carousel__image-source { width: 100%; height: 100%; vertical-align: bottom; }*/

@media only screen and (hover: hover)
{
  .carousel__image--hovered { display: block; }
}


.carousel__panel-info-container { displays: none; borders: solid 1px yellow; flex: 0 0 100%; heights: 200px; /* need the max-height too so it can't grow taller than it starts as, but we do reveal all content on hover because it's not set to overflow: hidden; */ width: 100%; padding: 0; position: relative; font-size: 24px; font-family: var(--extended-bold); color: var(--light-color); display: inline; word-break: break-word; }

.carousel__panel-info { margin: 0; padding: 0; font-size: 24px; font-family: var(--futura); line-height: 1.2; color: var(--light-color); word-break: break-word; display: flex; flex-flow: row wrap; align-items: stretch; /* so they're 100% height */ overflow: hidden; /*margin-bottom: clamp(20px, 1.8vw, 40px);*/ margin-tops: clamp(20px, 1.8vw, 40px); }

.carousel__panel-strain-name { flex: 1; borders:solid 1px red; padding: clamp(15px, 1vw, 40px) clamp(15px, 1vw, 40px); overflow: hidden; font-size: var(--carousel-panel-strain-name-font-size) }

.carousel__panel-strain-name-heading-part { font-size: var(--carousel-panel-strain-name-heading-part-font-size) /*18px;*/ }
.carousel__panel-strain-name-bzam-part { color: var(--orange); }
.carousel__panel-strain-name-dunn-part { color: var(--multi-pack-blue); }

.carousel__panel-strain-type { visibilitys: hidden; flex: 0 0 clamp(90px, 34%, 160px); borders: solid 1px red; /* padding: 8px;*/ display: flex; justify-content: center; align-items: center; overflow: hidden; transform: translateY(100%); transition: transform .3s ease-out; margin-top: 0; }
/*.carousel__panel-strain-type p { transform: translateY(60px); }*/

.carousel__panel-strain-type-oval { flex: 0 0 100%; padding: clamp(8px, 1vw, 10px) 18px clamp(8px, 1vw, 10px) 6px; /*border: 1.5px solid var(--light-color); border-radius: 50%;*/ text-align: right; font-family: var(--extended-bold-underlined); /* font-style: italic;*/ text-transform: uppercase; font-size: clamp(10px, 1.2vw, 18px); }

.carousel__panel-additional-info { display: none; margin-top: 0; border-tops: 1px solid var(--yellow); borders:solid 1px red; heights: 100px; overflow: hidden; }
.carousel__panel-additional-info:first-child { display: block; }
.carousel__panel-additional-info-inner { display: flex; transform: translateY(-100%); /*transition: transform .3s ease-out;*/ }

.carousel__panel-additional-info-thc { flex: 0 0 60%; padding: clamp(15px, 1vw, 40px) clamp(15px, 1vw, 40px); border-right: 1px solid var(--light-color); font-size: clamp(19px, 1.3vw, 28px); justify-content: left; line-height: 1.3; }

.carousel__panel-additional-info-thc-dot { border-radius: 50%; width: 14px; height: 14px; display: inline-block; margin-right: 6px; }
.carousel__panel-additional-info-thc-dot--bzam { background-color: var(--orange); }
.carousel__panel-additional-info-thc-dot--dunn { background-color: var(--multi-pack-blue); }

.carousel__panel-additional-info-type { flex: 1; padding: 18px; font-size: clamp(16px, 1vw, 26px); /*font-style: italic;*/ justify-content: flex-end; text-align: right; }

[data-carousel-panel-divider] { border-top: 1px solid var(--light-color); margin: auto auto; width: 0; transition: all .3s ease-out; }


.carousel__adults-only {
position: absolute;
    width: 32%;
    right: 42px;
    top: 7.5%;
    /* height: 100%; */
    z-index: 1;
}


/*.carousel__hover-bg-image { width: 84%; visibility: hidden; -webkit-animation: rotating 20s linear infinite; -moz-animation: rotating 20s linear infinite; -ms-animation: rotating 20s linear infinite; -o-animation: rotating 20s linear infinite; animation: rotating 20s linear infinite; z-index: 1; }*/

.carousel__panel:hover .carousel__hover-bg-image { visibility: visible; }

[data-just-carousel-panel="1"] { backgrounds: red; }
[data-just-carousel-panel="2"] { backgrounds: blue; }
[data-just-carousel-panel="3"] { backgrounds: red; }
[data-just-carousel-panel="4"] { backgrounds: blue; }
[data-just-carousel-panel="5"] { backgrounds: red; }
[data-just-carousel-panel="6"] { backgrounds: blue; }
[data-just-carousel-panel="7"] { backgrounds: red; }


@media only screen and (max-width: 2000px)
{
  .carousel { /*width: calc(100% - 68px); margin: 0 auto;*/ }

  .carousel__panel-strain-type { flex: 0 0 clamp(90px, 34%, 120px); }
  .carousel__panel-strain-type-oval { font-size: clamp(10px, 1.2vw, 13px); }
}

@media only screen and (max-width: 1300px)
{
  .carousel__panel-strain-name { font-size: clamp(18px, 2.2vw, 24px); /*padding: 5px 10px;*/ }
  .carousel__panel-strain-name-heading-part { font-size: clamp(calc(18px * .7), calc(2.2vw * .7), calc(24px * .7)); }

  .carousel__panel-additional-info-thc { font-size: clamp(15px, 1.4vw, 1.4vw); /*padding: 5px 10px;*/ }
  .carousel__panel-additional-info-type { font-size: clamp(12px, 1.3vw, 1.3vw); /*padding: 5px 10px;*/ }
}

@media only screen and (max-width: 1079px)
{
  /* reduce left/right margins on the entire carousel row so it's wider */
  /*.carousel--homepage { width: 100%; }*/
  .carousel__slider-container--homepage { margin: 0 calc(var(--page-content-horizontal-padding) - (40px)); }
  .carousel__arrow-container { flex-basis: 36px; }

  .carousel--homepage-limited-release:before { top: -10vw; }

  .carousel__panel-strain-name { font-size: clamp(20px, 2.3vw, 26px); /*padding: 5px 10px;*/ }
  .carousel__panel-strain-name-heading-part { font-size: clamp(calc(20px * .7), calc(2.3vw * .7), calc(26px * .7)); }

}

@media only screen and (max-width: 900px)
{
  .carousel__slider--products-page { flex-wrap: wrap; }
  
  .carousel__adults-only { display: none; }

  .carousel__panel-strain-name { /*padding: 0 3%;*/ font-size: clamp(20px, 3.4vw, 26px); }
  .carousel__panel-strain-name-heading-part { font-size: clamp(calc(20px * .7), calc(3.4vw * .7), calc(26px * .7)); }
  
  .carousel__panel-strain-type { flex-basis: 86px; }

  .carousel__panel-strain-type-oval { /*font-size: clamp(11px, 1.4vw, 20px);*/ }

  .carousel__panel-additional-info-thc { font-size: clamp(15px, 2vw, 18px); }

}

@media only screen and (min-width: 768px)
{
  .carousel--homepage-flower:before,
  .carousel--homepage-king-size:before {
    content: "";
    position: absolute;
    bottom: -12%;
    right: 0;
    width: 48%;
    height: 100%;
    background: url(/img/bg-layer/bg-layer-rectangle-horizontal-tilted-dots-space-on-left.png) no-repeat left bottom / contain;
    z-index: 2;
  }
  .carousel--homepage-vaporizer:before {
    content: "";
    position: absolute;
    top: -98%;
    right: 0;
    width: 42%;
    height: 216%;
    background: url(/img/bg-layer/bg-layer-rectangle-vertical-blotchy.png) no-repeat right bottom / contain;
    z-index: 2;
  }
  .carousel--homepage-dunkd:before {
    content: "";
    position: absolute;
    bottom: 4%;
    left: 0;
    width: 49%;
    height: 100%;
    /*background: url(/img/bg-layer/bg-layer-rectangle-horizontal-level-dots.png) no-repeat left bottom / contain;*/
    /*background: url(/img/bg-layer/bg-layer-rectangle-horizontal-level-grid.png) no-repeat left bottom / contain;*/
    background: url(/img/bg-layer/bg-layer-rectangle-horizontal-level-grid-space-on-right.png) no-repeat left bottom / contain;
    z-index: 2;
  }
  .carousel--homepage-limited-release:before,
  .carousel--homepage-hash:before,
  .carousel--homepage-pre-roll:before{
    content: "";
    position: absolute;
    top: -47%;
    left: 18%;
    width: 12%;
    height: 180%;
    background: url(/img/bg-layer/bg-layer-rectangle-vertical-dots-bold.png) no-repeat left top / contain;
    z-index: 2;
    /* filter: opacity(.5); */
  }
}

@media only screen and (max-width: 600px)
{

  
  .carousel {  }
  .carousel--homepage { padding-left: var(--page-content-horizontal-padding); padding-right: 0; /* left padding only */ margin-bottom: 20px; }
  .carousel--products-page {  }

  /* hide arrows */
  .carousel__arrow-container { display: none; }

  .carousel__slider-container { padding-top: 20px; }
  .carousel__slider-container--homepage { margin: unset; }

  /* make it touch-scrollable and enable scroll-snap; also see scroll-snap-align lower down which is necessary to make this work */
  .carousel__slider--homepage { overflow-x: scroll; overflow-y: hidden; transform: translateX(0) !important; /* needed because the JS might have set this to a negative number to slide this slider, but at this browser-width we want the sider at positon zero because now we scroll it instead of sliding it */ }

  @media (hover: none)
  {
    .carousel__slider--homepage { scroll-snap-type: x mandatory; }
  }


  /* scrollbar styling */
  /* width/height */
  .carousel__slider::-webkit-scrollbar { width: 9px; height: 9px; /*border-radius: 5px;*/ }
  /* track */
  .carousel__slider::-webkit-scrollbar-track { background: rgba(70,70,70,80%); /*border-radius: 5px;*/ }
  /* handle */
  .carousel__slider::-webkit-scrollbar-thumb { background: var(--yellow); /*border-radius: 5px;*/ }
  /* handle on hover */
  .carousel__slider::-webkit-scrollbar-thumb:hover { background: var(--yellow-light); width: 20px; }

  .carousel__panel { scroll-snap-align: start; }

  .carousel__panel-info { margin: 18px 0 36px; }
  .carousel__panel-strain-name { padding: 0 3%; font-size: clamp(20px, 5.9vw, 26px); }
  .carousel__panel-strain-name-heading-part { font-size: clamp(calc(20px * .7), calc(5.9vw * .7), calc(26px * .7)); }
  .carousel__panel-strain-type { align-self: flex-start; margin-top: 1vw; flex-basis: clamp(66px, 34%, 120px); transform: translateY(0) !important; /* to overwite things, in case JS set an inline-rule here while we were on desktop width */ overflow: visible; }
  .carousel__panel-strain-type-oval { padding: clamp(8px, 1.7vw, 10px) 4px; font-size: clamp(11px, 2.5vw, 20px); }

  /* panels */
  .carousel__panel-strain-type { /*display: none;*/ transform: translateY(0); }
  .carousel__panel-additional-info { display: none; height: 0px; }
}




/* -------------------------------------------------------------------------- */
/* wavy text
/* -------------------------------------------------------------------------- */

.wavy-text { /*position: absolute; bottom: 80px; left: 2%;*/ font-family: Jaune-GrandeBlack; colors: var(--yellow); z-index: 4; position: relative; }
.wavy-text--about-page { /*transform: translateY(-160px);*/ }

.wavy-text__svg { height: 210px; margin-top: -20px; }
.wavy-text__text { fill: var(--violet-light); font-size: 40px; }


@media only screen and (max-width: 1400px)
{
  .wavy-text--about-page { /*transform: translateY(-100px);*/ }
}

@media only screen and (max-width: 800px)
{
  .wavy-text__text { font-size: 4vw; }
}

@media only screen and (max-width: 600px)
{
  .wavy-text { display: none; }
}







/* -------------------------------------------------------------------------- */
/* stockist
/* -------------------------------------------------------------------------- */


.find-a-stockist { position: relative; background-image: url('/img/bg-yellow-orange-black.jpg?v=1'); background-size: cover; background-repeat: no-repeat; background-position: center; color: #f1efd9; }
.find-a-stockist--homepage { margin-top: calc( var(--section-divider-height) + var(--vertical-margin-between-carousels) ); z-index: 3; }

.find-a-stockist__inner { position: relative; padding: 120px var(--page-content-horizontal-padding) 140px; }

.find-a-stockist__heading { margin: 0 auto 18px; text-align: center; font-family: var(--futura); font-size: 105px; }

.find-a-stockist__subheading { font-size: 17px; font-family: var(--extended-bold) /*bulk-font-edit-5.45*/; text-align: center; padding: 0 80px; line-height: 1.2; color: var(--light-color); }

/*.stockist sup { position: relative; top: -1.4em; font-size: 30%; }*/

@media only screen and (max-width: 600px)
{
  .find-a-stockist__subheading { padding: 0; max-width: 410px; margin: auto; font-size: 20px; }
}



/* -------------------------------------------------------------------------- */
/* stockist dropdown
/* -------------------------------------------------------------------------- */


.stockist-dropdown { margin: 30px auto; text-align: left; width: 100%; max-width: 520px; font-family: var(--extended-bold) /*bulk-font-edit-5.45*/; }
.stockist-dropdown--stockists-page { margin: 30px 0; }

.stockist-dropdown__inner { flex: 1; position: relative; /*background-color: rgb(243, 240, 217);*/ color: white; }

.stockist-dropdown__toggle-container { display: flex; flex-flow: row nowrap; /*border-radius: 20px;*/ background: url('/img/bg-light.jpg?v=1') top center repeat; }
.stockist-dropdown__toggle-left { position: relative; flex: 1; padding: 20px 50px 14px 24px; /*border: 1px solid var(--yellow); border-right: none; border-radius: 20px 0 0 20px; */ color: var(--dark-text-color); font-size: 16px; font-family: var(--extended-bold); /*bulk-font-edit-5.45*/; }
.stockist-dropdown__toggle-right { flex: 0 0 126px; padding: 14px; /*border: 1px solid var(--yellow);*/ /* border-radius: 0 20px 20px 0; */ background-color: var(--orange); display: flex; align-items: center; justify-content: center; color: var(--dark-text-color); font-family: var(--extended-extra-bold-underlined); font-size: 17px; }
.stockist-dropdown__toggle-right:hover { background-color: var(--orange-dark); }

[data-stockist-dropdown-toggle-container="showing"] { /* border-radius: 20px 20px 20px 0; */ }
[data-stockist-dropdown-toggle-container="showing"] .stockist-dropdown__toggle-left { /* border-radius: 20px 0 0 0; */ }
[data-stockist-dropdown-toggle-container="showing"] .stockist-dropdown__toggle-right { /* border-radius: 0 20px 20px 0; */ }

.stockist-dropdown__dropdown-arrow { width: 20px; position: absolute; top: 20px; right: 16px; font-family: sans-serif; font-weight: bold; }

.stockist-dropdown__dropdown { display: none; position: absolute; width: calc(100% - 126px); margin-top: 54px; margin-bottom: 20px; top: 0; left: 0; background: url('/img/bg-light.jpg?v=1') top center repeat; /* border-radius: 0 0 20px 20px; */ /*border: 1px solid var(--yellow);*/ border-top: none; padding-bottom: 18px; z-index: 3; /* so it's always above MM / DD / YYYY even if they're shaking */ }


.stockist-dropdown__link { display: block; padding: 10px 24px 10px 42px; color: var(--dark-text-color); font-size: 16px; line-height: 1.2; }
.stockist-dropdown__link--participating-retailers { padding: 10px 24px; }
.stockist-dropdown__link--bc { position: relative; }

/* Provinces - cross out the names and dim them */
.stockist-dropdown__link[href="#"] { text-decoration: line-through; color: var(--dark-text-color); }

/* hide the dropdown item that's currently selected */
[data-stockist-option="selected"] { display: none; }


.province-inner a { /*background-color: rgb(243, 240, 217);*/ padding: 0 8px; /*border-radius: 30px;*/ }

.stockist-dropdown__link:hover { background-color: var(--orange); }


.stockist-dropdown__divider { margin: 0 0 0 24px; height: 1px; width: 80%; background-color: var(--dark-text-color); }
.stockist-dropdown__provincial-stores-heading { padding: 20px 24px 10px; color: var(--dark-text-color); line-height: 1.2; font-size: 14px; }


.stockist-dropdown__bc-infobox { display: none; width: 100%; max-width: 60vw; text-align: center; line-height: 1.2; background: url('/img/bg-light.jpg?v=1') top center repeat; color: var(--dark-text-color); padding: 8px; top: 10px; position: absolute; left: 70px; box-shadow: 0 0 6px 0px rgb(0 0 0 / 70%); }




@media only screen and (max-width: 900px)
{
  .stockist { /*background-image: url('/img/mobile-bg-find-your-ness.jpg'); background-size: cover; padding: 120px 20px;*/ }
  .stockist p { padding: 0 20px; }
  .stockist img.rotating { width: 120px; margin-left: -60px; left: 50%; } /* centers it */
}

@media only screen and (max-width: 840px)
{
  br.br-find-your-ness { display: inline; }
}

@media only screen and (max-width: 600px)
{
  .find-a-stockist--homepage { margin-top: 56px; }

  .find-a-stockist__heading { font-size: 16vw; }
}

@media only screen and (max-width: 480px)
{
  .stockist-dropdown__toggle-left { /*line-height: 1.3;*/ }
  .stockist-dropdown__toggle-right { flex-basis: 120px; }

  .stockist-dropdown__dropdown-arrow { /*top: 24px;*/ }

  .stockist-dropdown__dropdown { width: calc(100% - 120px); }

  .stockist-dropdown__link { padding-left: 18px; }
  .stockist-dropdown__divider { margin-left: 12px; }
  .stockist-dropdown__provincial-stores-heading { padding-left: 12px; }
}

@media only screen and (max-width: 400px)
{
  .stockist-dropdown__toggle-left { font-size: 13px; padding: 17px 42px 14px 12px; line-height: 1.3; }
  .stockist-dropdown__toggle-right { flex-basis: 100px; font-size: 15px; padding: 17px 6px; }
  
  .stockist-dropdown__dropdown-arrow { /*top: 16px;*/ right: 8px; }

  .stockist-dropdown__dropdown { width: calc(100% - 100px); }

  .stockist-dropdown__link { font-size: 13px; }

}











/* -------------------------------------------------------------------------- */
/* footer
/* -------------------------------------------------------------------------- */

:root {
  --footer-links-container-horizontal-gap: 1.5vw;
  --footer-links-container-items: 3;
}


.footer { z-index: 2; position: relative; background: url('/img/bg-footer.png?v=1') top left / clamp(300px, 35%, 1200px) no-repeat; }
.footer--bzam-report { background: none; }

/*.footer::before {
    content: "";
    position: absolute;
    top: -100px;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('/img/bg-footer.png?v=1') left top / clamp(300px, 35%, 1200px) no-repeat;
    z-index: 0;
}*/

.footer__disclaimer { max-width: 860px; margin: 0 auto; padding: 50px 30px 0; text-align: center; font-family: var(--extended-bold) /*bulk-font-edit-5.45*/; font-size: 11px; line-height: 1.3; /*font-style: italic;*/ color: var(--light-color); position: relative; z-index: 2; } /* this goes above footer__inner because it's not inside of footer__inner because it needs to be full-width */

.footer__inner { padding: 30px calc(var(--page-content-horizontal-padding) + 60px) 60px; borders:solid 1px red; }

.footer__inner-inner { max-width: 2200px; margin: auto; z-index: 2; position: relative; display: flex; flex-flow: row wrap; border-top: 1px solid var(--light-color); }
.footer__inner-inner--bzam-report { border-top: none; }

.footer__join-heading { font-family: var(--futura); font-size: 31px; margin-bottom: 32px; color: var(--orange); }

/* the success message that's hidden until someone successfully fills out the join mailing list form */
.footer__thanks-for-joining { display: none; /* JS shows this when ready */ font-family: var(--extended-bold) /*bulk-font-edit-5.45*/; line-height: 1.3em; color: var(--yellow); }

/* first row on desktop, with form on left and three rows of links on right */
.footer__join-container { border-right: 1px solid var(--light-color); border-bottom: 1px solid var(--light-color); flex: 0 0 50%; padding: 20px calc(24px + 1vw) 20px 20px; }
.footer__join-container--bzam-report { flex: 0 0 170px; padding-left: 0; padding-right: 20px; border-right: none; }

.footer__links-and-icons-container { flex: 0 0 50%; display: flex; flex-flow: row wrap; border-bottom: 1px solid var(--light-color); }
.footer__links-and-icons-container--bzam-report { flex: 1 0 calc(100% - 170px); }

.footer__links-container { border-bottom: 1px solid var(--light-color); flex: 0 0 100%; padding: 20px; padding-right: 0; display: flex; flex-flow: row wrap; gap: 20px var(--footer-links-container-horizontal-gap); justify-content: space-between; }
.footer__links-container--bzam-report { flex: 0 0 50%; border-bottom: none; }

.footer__icons-container { flex: 0 0 100%; flex-flow: row wrap; padding: 20px 0 20px 20px; padding-right: 0; display: flex; align-items: center; align-content: flex-start; gap: 10px; }
.footer__icons-container--bzam-report { flex: 0 0 50%; }


.footer__category-container { flex: 0 0 calc( (100% / 3) - ( 2 * var(--footer-links-container-horizontal-gap) / var(--footer-links-container-items) ) ); padding: 2px 0; }
.footer__category-container--shop { /*margin-left: 60px;*/ position: relative; }

.footer__copyright-or-privacy-container { flex: 0 0 50%; padding: 16px 0; borders:solid 1px red; min-height: 40px; color: var(--light-color); font-family: var(--extended-bold) /*bulk-font-edit-5.45*/; line-height: 1.3em; }
.footer__copyright-or-privacy-container--terms { text-align: right; }
  
.footer__form { padding-bottom: 15px; }
.footer__form-inputs-container { position: relative; display: flex; flex-flow: row wrap; justify-content: space-between; margin-bottom: 10px; }
.footer__form-disclaimers-and-submit-container { display: flex; flex-flow: row wrap; }
.footer__form-disclaimers-container { flex: 1; }
.footer__form-submit-container { flex: 0 0 auto; margin-left: 20px; display: flex; justify-content: flex-end; align-items: flex-start; }

/* contents of footer__form-inputs-container */
.footer__input { flex: 0 0 calc(50% - 5px); max-width: calc(50% - 5px); margin: 0 0 10px 0; padding: 16px; border: none; border-radius: 0; /* prevents iOS from adding this radius automatically */ font-size: 15px; height: 47px; outline: none !important; background: url(/img/bg-light.jpg?v=1) top center repeat; color: var(--dark-text-color); position: relative; font-family: var(--extended-bold) /*bulk-font-edit-5.45*/; }
.footer__input::placeholder { color: var(--dark-text-color); }
/*.footer__input--email { flex: 0 0 100%; max-width: 100%; }*/


.footer__province-container { flex: 0 0 calc(50% - 5px); max-width: calc(50% - 5px); margin: 0 0 10px 0;  height: 47px; outline: none !important; color: var(--dark-text-color); position: relative; display: flex; flex-flow: row wrap; align-items: center;  font-family: var(--extended-bold) /*bulk-font-edit-5.45*/; }

.footer__province-selected { max-width: 80%; }

/*.footer__province-container[data-footer] { }*/

.footer__province-dropdown-toggle { display: flex; flex-flow: row nowrap; flex: 0 0 100%; justify-content: space-between; margin: 0 0 10px 0; padding: 0 24px; border: none; font-size: 15px; height: 47px; outline: none !important; position: relative; background: url(/img/bg-light.jpg?v=1) top center repeat; display: flex; flex-flow: row wrap; align-items: center; }

.footer__province-dropdown-toggle[data-footer-province-dropdown-toggle="on"] { }

.footer__province-dropdown-arrow { width: 24px; }

.footer__province-dropdown { display: none; position: absolute; width: 100%; margin-top: 47px; margin-bottom: 20px; top: -1px; left: 0; background: url(/img/bg-light.jpg?v=1) top center repeat; padding-bottom: 20px; z-index: 3; }

.footer__province-link { display: block; padding: 6px 24px; font-size: 15px; }

.footer__province-link:hover { background-color: var(--orange); }




/* contents of footer__form-disclaimers-and-submit-container */

/* contents of footer__form-disclaimers-container */
.footer__form-disclaimer-label { display: flex; margin-top: 12px; margin-bottom: 15px; position: relative; padding-left: 45px; cursor: pointer; font-size: 20px; }
.footer__form-disclaimer-label--last { margin-bottom: 0; }
.footer__form-disclaimer-checkbox { flex-basis: 0px; width: 0; margin: 0; visibility: hidden; /* hide the default checkbox */ /*flex: 0 0 20px; margin: 0 16px 0 0; width: 20px; height: 20px; background-color: var(--yellow);*/ }
.footer__form-disclaimer-checkbox-pretty { flex: 0 0 20px; margin: 0 14px 0 0; background-color: var(--light-color); position: absolute; top: 0; left: 0; height: 25px; width: 25px; background-color: var(--light-color); }
.footer__form-disclaimer-text { flex: 1; font-family: var(--extended-bold) /*bulk-font-edit-5.45*/; font-size: 10px; color: var(--light-color); line-height: 1.1; }

/* custom checkbox styling on hover/click/checked etc ... */
  
/* specify the background color to be shown when hovering over checkbox */
.footer__form-disclaimer-label:hover input ~ .footer__form-disclaimer-checkbox-pretty { background-color: var(--yellow); }
  
/* specify the background color to be shown when checkbox is active */
.footer__form-disclaimer-label input:active ~ .footer__form-disclaimer-checkbox-pretty { background-color: var(--orange); }
  
/* specify the background color to be shown when checkbox is checked */
.footer__form-disclaimer-label input:checked ~ .footer__form-disclaimer-checkbox-pretty { background-color: var(--orange); }
  
/* checkmark to be shown in checkbox; not be shown when not checked */
.footer__form-disclaimer-checkbox-pretty:after { content: ""; position: absolute; display: none; }
  
/* display checkmark when checked */
.footer__form-disclaimer-label input:checked ~ .footer__form-disclaimer-checkbox-pretty:after { display: block; }
  
/* checkmark styling; rotated the rectangle by 45 degreed and showing only two borders to make it look like a tickmark */
.footer__form-disclaimer-label .footer__form-disclaimer-checkbox-pretty:after { left: 8px; bottom: 6px; width: 8px; height: 14px; border: solid var(--light-color); border-width: 0 4px 4px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }

/* .. end custom checkbox styling */

/* contents of footer__form-submit-container */
.footer__submit-link { background: var(--orange); margin-top: 12px; padding: 12px 30px; font-family: var(--extended-bold-underlined); /*position: absolute; display: block; bottom: 0; right: 10px; transform: translateY(-23px); width: 60px; height: auto;*/ }
.footer__submit-link:hover { background: var(--orange-dark); }
.footer__submit-text { /*display: none;*/ }


/* text that shows on the Flavour Fan Club page (we don't show the form in the footer on that page since the form is on the page body instead) */
.footer__text-for-bzam-report-page-only { font-family: var(--extended-bold) /*bulk-font-edit-5.45*/; font-size: 11px; color: var(--light-color); line-height: 1.2; margin-top: 26px; }

.footer__category-heading { font-family: var(--extended-bold-underlined) /*bulk-font-edit-5.45*/; font-size: clamp(16px, .7vw, 20px); color: var(--yellow); text-transform: uppercase; margin-bottom: 30px; }

.footer__link { display: block; margin: 14px 0; color: var(--light-color); font-family: var(--extended-bold); font-size: clamp(16px, .7vw, 20px); }
.footer__link:hover { color: var(--light-color); }
.footer__link--email { font-family: var(--extended-bold) /*bulk-font-edit-5.45*/; font-size: clamp(calc(16px * .8), calc(.7vw * .9), calc(20px * .9)); }

.footer__link-image { height: 18px; /* so they all have the same font-size, since these are images of text, so they can't be the same width or else the shorter words would appear larger */ }

.footer__copyright-privacy-etc-text { font-size: 10px; line-height: 15px; }

.footer__icon { display: inline-block; /*width: min(24%, 40px); margin-right: min(6%, 10px);*/ background-size: cover; flex: 1; borders:solid 1px red; display: flex; align-items: center; /* so it vertically-centers this icon because it's a bit smaller than the others */ }

.footer__icon--mature { flex: 0 0 calc( 63.0% - (20px / 3) ); }
.footer__icon--exclusively { flex: 0 0 calc( 27.8% - (20px / 3) ); }
.footer__icon--social { flex: 0 0 calc( 9.2% - (20px / 3) ); /* there are 3 of these; this*3 + the two below must equal 100%; for the other calculation: we have 40px total gap (because there's a 10px gap after each of the 5 items except the last item) and we have 5 total items, so that's how much we reduce each item's width by */ }
/*.footer__icon--instagram { background-image: url('/img/footer__logo-instagram.svg'); }
.footer__icon--facebook { background-image: url('/img/footer__logo-facebook.svg'); }
.footer__icon--twitter { background-image: url('/img/footer__logo-twitter.svg'); }*/
.footer__icon--entire-row { flex: 0 0 100%; }

.footer__icon-image { max-width: 100%; }
.footer__icon-image--mature { width: 100%; }

.footer__mobile-only-links { display: none; }



@media only screen and (max-width: 1500px)
{
  /*.footer__link { font-size: 1.6vw; }*/
}

@media only screen and (max-width: 1360px) and (min-width: 1024px)
{
  .footer__category-container { /*padding-left: 1vw; padding-right: 1vw;*/ }
  .footer__category-heading { font-size: clamp(12px, 1.2vw, 16px); }
  .footer__link { font-size: clamp(12px, 1.2vw, 16px); }
  .footer__link--email { font-size: clamp(calc(12px * .8), calc(1.2vw * .8), calc(16px * .8)); }
  .footer__link-image { height: 1.2vw; }

  .footer__input--email,
  .footer__province-container { flex-basis: 100%; max-width: unset; }
}

@media only screen and (max-width: 1200px) and (min-width: 1024px)
{

}

@media only screen and (max-width: 1200px)
{
  .footer__category-container { /*padding-left: .8vw; padding-right: .8vw;*/ }
  .footer__link-image { height: 1vw; }

  /* bzam-report page only */
  
  .footer__join-container--bzam-report { padding-right: 10px; font-size: 10px; flex-basis: 158px; }
  .footer__links-and-icons-container--bzam-report { flex-basis: calc(100% - 158px); }
  .footer__links-container--bzam-report { padding-left: 10px; gap: 20px calc(var(--footer-links-container-horizontal-gap) / 1.5); }
  .footer__icons-container--bzam-report { padding-left: 10px; }
}

@media only screen and (max-width: 1079px)
{
  .footer__disclaimer { max-width: 840px; padding-left: calc(var(--page-content-horizontal-padding) + 80px); padding-right: calc(var(--page-content-horizontal-padding) + 80px); }
}

@media only screen and (min-width: 1024px)
{
  .footer__text-for-bzam-report-page-only--mobile-only { display: none; }
}

@media only screen and (max-width: 1023px)
{
  .footer__inner-inner { border-bottom: none; }
  /* this is ordered how you see it visually, rather than dom-ordered */
  .footer__links-and-icons-container { order: 1; flex: 0 0 100%; }
  .footer__links-container { padding-left: 0 }
  .footer__icons-container { padding-left: 0 }
  .footer__join-container { order: 2; flex: 0 0 100%; padding: 40px 0; border-top: 1px solid var(--light-color); border-right: none; }
  .footer__join-container--bzam-report { border-top: none; padding: 20px 0; }

  .footer__copyright-or-privacy-container { order: 3; }

  /* bzam-report page only */
  .footer__join-container--bzam-report { border-top: none; padding: 20px 0; }
  .footer__text-for-bzam-report-page-only--desktop-only { display: none; }
  .footer__text-for-bzam-report-page-only--mobile-only { margin-top: 0; line-height: 1.5; text-align: center; }
}


@media only screen and (max-width: 1000px)
{
/*  .footer__join-container { padding-right: 50px; }
  
  .footer__category-container { flex-basis: calc( (50% / 2) - (10px / 2) );  }
  .footer__category-container--shop { margin-left: 10px; }


  .footer__mobile-only-links { display: block; }
  .footer__mobile-only-links--social { position: absolute; bottom: 20px; left: .8vw; width: 128px; }
  .footer__mobile-only-links--company { margin-top: 35px; }

  .footer__category-heading {  }
  .footer__link { font-size: 2vw; }
  .footer__link--mobile-only-last { margin-bottom: 0; }

  // hide these two "panels" 
  .footer__category-container--about { display: none; }
  .footer__copyright-or-privacy-container { display: none; }*/
}

@media only screen and (max-width: 959px)
{
  .footer__links-container--bzam-report { flex: 0 0 100%; padding-bottom: 4px; }
  .footer__icons-container--bzam-report { flex: 0 0 100%; padding-top: 4px; }
}

@media only screen and (max-width: 1000px) and (min-width: 768px)
{
  .footer__inner-inner { align-items: flex-start; /* so that each column gets to be its own height instead of all columns being as tall as the one with the form; we then use JS to make sure that the SHOP column is as tall as the COMPANY column so that the social-icons get properly vertically-aligned with ABOUT BZAM */ }

  /*.footer__input { flex-basis: 100%; max-width: 100%; }*/
}

@media only screen and (max-width: 820px)
{
  .footer__copyright-or-privacy-container { flex-basis: 100%; text-align: center; padding-bottom: 0; }
  .footer__copyright-or-privacy-container--terms { padding-top: 4px; }
}


/* push the arrow below the form now (and show "ENTER"), because otherwise a long email address gets hidden behind the arrow; note that we do this at two different browser-widths */
@media only screen and (max-width: 959px) and (min-width: 768px)
{

  .footer__submit-link { position: relative; display: flex; align-items: center; justify-content: flex-end; bottom: auto; right: auto; transform: none; width: 100%; text-align: right; margin-top: 10px; height: auto; }
  .footer__submit-text { display: inline; font-family: var(--extended-bold) /*bulk-font-edit-5.45*/; font-size: 16px; }
  .footer__submit-image { /*width: 54px; margin-bottom: 2px;*/ /* appears more vertically-centered this way */ }

    /*.footer__mobile-only-links--social { bottom: 55px; }*/
}

@media only screen and (max-width: 767px)
{
  /*.footer__disclaimer { font-size: 10px; }

  .footer__inner { padding: 0 var(--page-content-horizontal-padding) 10px; }

  .footer__join-container { order: 5; flex-basis: 100%; padding: 40px 0 0; }
  
  .footer__category-container { padding-left: 0; padding-right: 0; }
  .footer__category-container--shop { order: 1; margin-left: 0; flex-basis: 50%;  }
  .footer__category-container--company { order: 2; flex-basis: 50%; }
  .footer__category-container--about { displays: none; }
  .footer__copyright-or-privacy-container { display: none; }

  .footer__category-heading { margin-bottom: 20px; }
  */
  .footer__category-heading { font-size: clamp(14px, 2.5vw, 16px); }
  .footer__link { font-size: clamp(14px, 2.5vw, 16px); }
  .footer__link--email { font-size: clamp(calc(14px * .8), calc(2.5vw * .8), calc(16px * .8)); }

  .footer__input--email,
  .footer__province-container { flex-basis: 100%; max-width: unset; }

}

@media only screen and (max-width: 600px)
{
  .footer { background: none; }

  .footer__disclaimer { padding-left: calc(var(--page-content-horizontal-padding) + 20px); padding-right: calc(var(--page-content-horizontal-padding) + 20px); /* reduce the extra left/right padding that applies to footer compared to rest of site */ }
  .footer__inner { padding-left: calc(var(--page-content-horizontal-padding) + 20px); padding-right: calc(var(--page-content-horizontal-padding) + 20px); /* reduce the extra left/right padding that applies to footer compared to rest of site */ }
  /* put submit button below disclaimers so people don't hit "submit" on their phones without scrolling far enough to see that there are two disclaimers to check */
  .footer__form-disclaimers-and-submit-container { justify-content: flex-end; }
  .footer__form-disclaimers-container { flex-basis: 100%; }
  .footer__form-submit-container { margin: 30px 0 0; }
}

@media only screen and (max-width: 559px)
{
  .footer__input--email,
  .footer__province-container { flex-basis: 100%; max-width: unset; }
}

/* stacked layout for SHOP / COMPANY / ABOUT */
@media only screen and (max-width: 439px)
{
  .footer__category-container { flex: 0 0 100%; }
  .footer__category-heading { font-size: 16px; }
  .footer__link { font-size: 16px; }
  .footer__link--email { font-size: 13px; }
}

@media only screen and (max-width: 413px)
{
  .footer__input { flex-basis: 100%; max-width: 100%; }
  
  .footer__join-heading { font-size: 7vw; }
}

@media only screen and (max-width: 390px)
{
  .footer__form-inputs-container { justify-content: flex-end; /* so the arrow aligns-right instead of left */ }
  /*.footer__link { font-size: 16px; }
  .footer__link--email { font-size: calc(16px * .8); }*/
}

 






/* -------------------------------------------------------------------------- */
/* below footer (wavy part at bottom)
/* -------------------------------------------------------------------------- */

.below-footer { width: 100%; bottom: 0; text-align: center; overflow: hidden; z-index: 11; /*border: solid 1px red;*/ }

.below-footer__content { /*margin: 0 30px;*/ background: url(/img/bg-light.jpg?v=1) top center repeat; padding: 6px 0 4px; font-family: var(--extended-bold) /*bulk-font-edit-5.45*/; font-weight: bold; font-size: 15px; color: var(--dark-text-color); borders:solid 1px red; }

.below-footer__logo { vertical-align: middle; display: inline-block; }
.below-footer__logo--ness { width: 88px; vertical-align: middle; margin: 0 4px 0 12px; /* needs strange margins to appear centered */ padding-top: 3px; }
.below-footer__logo--cookies { width: 130px; vertical-align: middle; margin: 0 8px; }
.below-footer__logo--highly-dutch-organic { width: 130px; vertical-align: middle; margin: 0 8px; }
.below-footer__logo--bzaaaar { width: 130px; vertical-align: middle; margin: 0 8px; }

.below-footer__logo-image { width: 100%; }








/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
/* products pages (strain-specific pages)
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */



/* -------------------------------------------------------------------------- */
/* strain carousel container that's used on subpages
/* -------------------------------------------------------------------------- */

/* see the "strain-carousel (used on multiple pages)" section higher up (the ".strain-carousel-container" class) */





/* -------------------------------------------------------------------------- */
/* strain hero
/* -------------------------------------------------------------------------- */

/* note that JS determines some of the margins/padding here because it depends on which of the two columns is taller; look for the data-strain-hero-column stuff there */

/* flex stuff */
.strain-hero__inner-inner/*,
.strain-hero__image-container,
.strain-hero__right-column*/ { display: flex; flex-flow: row wrap; borders:solid 1px red; }


/* all non-flex rules */

.strain-hero {
  position: relative; padding: 60px 0;
  background:
    url('/img/bg-layer/bg-layer-rectangle-horizontal-level-grid-space-on-right.png') calc(100% + 20%) 50% / 44% no-repeat;
  z-index: 4;
}

.strain-hero__inner { padding: 40px var(--page-content-horizontal-padding) 40px; }

.strain-hero__inner-inner { max-width: 2200px; margin: auto; gap: 30px 0; align-items: center; }

.strain-hero__left-column { flex: 1 1 50%; min-width: 400px; borders: solid 1px red; /*padding-bottom: 40px;*/ }
.strain-hero__right-column { flex: 1 1 50%; borders: solid 1px red; position: relative; padding-right: 20px; /*background:
    url('/img/bg-layer/bg-layer-rectangle-horizontal-level-grid-space-on-right.png') calc(100% + 20%) top / 800px no-repeat;*/ }
.strain-hero__right-column::before {
  /*content: "";
  position: absolute;
  top: -50px;
  left: -50px;
  width: 100%;
  height: 1030px;
  background: url(/img/bg-layer/bg-layer-rectangle-horizontal-level-grid-space-on-right.png) right top / 1000px no-repeat;
  background-size: contain;
  z-index: 3;*/
  /* filter: opacity(.5); */
}

/* left column contents */

.strain-hero__image-container { display: flex; flex-flow: row nowrap; overflow: hidden; align-items: flex-start; }

.strain-hero__status-sticker-on-image { display: none; /* only shows on stacked layout */ position: absolute; top: calc(12vw + 20px); left: 20vw; width: 96px; height: 96px; z-index: 2; }
.strain-hero__status-sticker-on-image--coming-soon { position: absolute; top: calc(9vw + 20px); left: 21vw; width: 96px; height: 96px; z-index: 2; }


.strain-hero__image { max-width: 100%; transform: translateX(-100%); } /* don't put the transition here, keep it only below, so when the page loads this first translateX isn't animated because we don't want this to animate yet */
.strain-hero__image--bzam-x-dunn { transform: translateX(0); }
/*.strain-hero__image--multi-pack { transform: translateX(0); }*/

[data-strain-hero-image-container="vanity"] .strain-hero__image { transform: translateX(-100%); transition: transform .2s; }
[data-strain-hero-image-container="actual"] .strain-hero__image { transform: translateX(0px); transition: transform .2s; }

.strain-hero__toggle-button-container { margin-top: 40px; display: flex; justify-content: center; align-items: center; font-family: var(--xrx-bold); color: var(--light-color); }
/*.strain-hero__toggle-button-container--multi-pack { opacity: .3; }*/

.strain-hero__toggle-button-text-disabled { opacity: .3; }

.strain-hero__image-toggle-button {height: 30px; width: 60px; border-radius: 20px; padding: 3px; margin:  0 10px; position: relative; border: 1px solid var(--light-color); }
.strain-hero__image-toggle-button--bzam-x-dunn { cursor: default; }
/*.strain-hero__image-toggle-button--multi-pack { cursor: default; }*/

.strain-hero__image-toggle-dot {background-color: var(--light-color); display: inline-block; height: 22px; width: 22px; z-index: 100; border-radius: 16px; transform: translateX(0px); transition: transform .2s; }

[data-strain-hero-image-toggle="vanity"] .strain-hero__image-toggle-dot { transform: translateX(0px); }
[data-strain-hero-image-toggle="actual"] .strain-hero__image-toggle-dot { transform: translateX(30px); }
[data-strain-hero-image-toggle="actual-with-vanity-disabled"] .strain-hero__image-toggle-dot { transform: translateX(30px); transition: none; }

.strain-hero__vanity-actual-disclaimer { color: var(--light-color); /*opacity: 0.4;*/ text-align: center; margin: 20px auto 0; font-family: var(--extended-bold) /*bulk-font-edit-5.45*/; font-size: 8px; line-height: 1.4; padding: 0 60px; max-width: 740px; }

/* right column contents */

.strain-hero__status-sticker-on-strain-name { position: absolute; top: -56px; left: -65px; width: 96px; height: 96px; }
.strain-hero__status-sticker-on-strain-name--coming-soon { top: -52px; left: -64px; width: 96px; height: 96px; }
.strain-hero__heading { color: var(--light-color); font-family: var(--futura); font-size: var(--heading-font-size); line-height: 1.15; margin-bottom: 40px; }
.strain-hero__heading-top-part { display: inline-block; font-size: 30px; margin-bottom: 6px; }
.strain-hero__heading-bzam-part { color: var(--orange); }
.strain-hero__heading-dunn-part { color: var(--multi-pack-blue); }
.strain-hero__subheading { font-family: "Jaune-GrandeBlack"; color: var(--light-color); font-size: 24px; line-height: 1.15; margin-bottom: 40px; }
.strain-hero__description { font-family: var(--extended-bold) /*bulk-font-edit-5.45*/; font-weight: bold; color: var(--light-color); font-size: 16px; line-height: 1.4; margin-bottom: 50px; }

.strain-hero__thc-and-type { display: flex; align-items: center; margin-bottom: 20px; }
.strain-hero__thc { font-family: var(--futura); color: var(--light-color); font-size: clamp(26px, 2vw, 26px); margin-right: 14px; }
.strain-hero__type-oval {
    /*flex: 0 0 80%;*/
    padding: 10px 10px 4px;
    backgrounds: url(/img/strain-hero__type-oval.svg) no-repeat center center / contain;
    text-align: center;
    font-family: var(--xrx-bold);
    font-size: 16px;
    color: var(--light-color);
    text-transform: uppercase;
}

/* the strain hero percentage stuff - IF YOU MAKE CHANGES TO THESE NUMBERS, YOU MUST ALSO CHANGE THINGS IN THE JS (GSAP) AND IN strains-and-products.inc.php TO MATCH THIS */

.strain-hero__percent-wrapper { height: 30px; width: 300px; margin: 0 0 10px; position: relative; /*border: 2px solid var(--light-color);  border-radius: 18px;*/ overflow: hidden; background: url('/img/strain-hero__percent-wrapper-bg.svg') top left / contain no-repeat; display: flex; flex-flow: row nowrap; padding-left: 5px; }

/* creates the < shape on left */
.strain-hero__percent-filled-left { flex: 0 0 30px; height: 30px; background-color: var(--yellow); transform:rotate(45deg); }

/* the middle portion that gets filled in */
.strain-hero__percent-filled { flex: 0 0 auto; height: 100%; /*border-radius: 18px 0 0 18px;*/ background-color: var(--yellow);  margin-left: -15px; /* so there's no gap between the < on left which is actually a diamond shape in css */ margin-right: -15px; /* so there's no gap between the < on right which is actually an hourglass shape in css */ width: 15px; /* JS animates this to its final width based on data-params in the HTML so edit strains-array.inc.php to change this, but it still can't start at zero otherwise we see that the < shapes on left and right of this are css-based (because we see tiny gaps there at first) */ }

/* creates the < shape on right; more complex because requires two divs inside */
.strain-hero__percent-filled-right { flex: 0 0 30px; height: 30px; }
.strain-hero__percent-filled-right-top { flex: 0 0 30px; height: 30px; background-color: var(--yellow); transform: rotate(24deg); margin-top: -15px; }
.strain-hero__percent-filled-right-bottom { flex: 0 0 30px; height: 30px; background-color: var(--yellow); transform: rotate(68deg); margin-left: -6px; }

/* so the percent page SVG sits on top of the yellow bar */
.strain-hero__percent-bg-that-sits-on-top { height: 30px; width: 300px; margin-top: -40px; background: url('/img/strain-hero__percent-wrapper-bg.svg') top left / contain no-repeat; position: relative;
    z-index: 3; }

.strain-hero__cbd { font-family: var(--extended-bold) /*bulk-font-edit-5.45*/; font-style: italic; font-size: 16px; color: var(--violet); font-weight: bold; text-align: right; }


@media only screen and (max-width: 2700px)
{
  .strain-hero { background-position: calc(100% + 20%) 40%; }
}

@media only screen and (max-width: 2300px)
{
  .strain-hero { background-position: calc(100% + 20%) 30%; }
}

@media only screen and (max-width: 2000px)
{
  .strain-hero { background-position: calc(100% + 20%) 20%; }
}
@media only screen and (max-width: 1700px)
{
  .strain-hero { background-position: calc(100% + 20%) 10%; }
}

@media only screen and (max-width: 1400px)
{
  /*.strain-hero__heading { font-size: max(36px, 4vw); }*/
  /*.strain-hero__status-sticker-on-strain-name { width: clamp(50px, 8vw, 96px); height: clamp(50px, 8vw, 96px); top: -4vw; left: -5vw; }*/
}

@media only screen and (max-width: 1100px)
{
  .strain-hero__inner-inner { /*padding-left: var(--page-content-horizontal-padding); padding-right: var(--page-content-horizontal-padding);*/ }
}

/* stacked layout */
@media only screen and (max-width: 900px)
{
  .strain-hero { background: none; }

  .strain-hero__inner { padding-bottom: 30px; padding-left: 0; padding-right: 0; }
  
  .strain-hero__inner-inner { /*gap: 10px 0;*/ }
  
  .strain-hero__left-column { flex: 0 0 100%; min-width: auto; padding-left: var(--page-content-horizontal-padding); padding-right: var(--page-content-horizontal-padding); orders: 2; }
  .strain-hero__right-column { flex: 0 0 100%; padding-left: var(--page-content-horizontal-padding); padding-right: var(--page-content-horizontal-padding); orders: 1; background:
    url('/img/bg-layer/bg-layer-rectangle-horizontal-level-grid-space-on-right.png') calc(100% + 80%) top / 90% no-repeat; }

  /* left col contents */
  .strain-hero__status-sticker-on-image { display: inline; } /* show "NEW" label on image */
  
  /* right col contents */
  .strain-hero__status-sticker-on-strain-name { display: none; } /* hide "NEW label" on strain-name */

  .strain-hero__vanity-actual-disclaimer { padding: 0; max-width: 620px; }

  .strain-hero__description { margin-bottom: 30px; }
}

@media only screen and (max-width: 600px)
{

  .strain-hero { padding-top: 20px; }

  .strain-hero__right-column { background: none; }

  .strain-hero__status-sticker-on-image { top: calc(10vw - 10px); left: 20vw; width: calc(12.7vw + 20px); height: calc(12.7vw + 20px); z-index: 2; }
  .strain-hero__status-sticker-on-image--coming-soon { top: calc(10vw - 20px); left: 18vw; }

  .strain-hero__heading-top-part { font-size: 24px; }

  .strain-hero__thc-and-type { align-items: center; }
  .strain-hero__thc { font-size: 24px; }
  /*.strain-hero__type-oval { font-size: 12px; }*/
}

@media only screen and (max-width: 500px)
{
  .strain-hero__status-sticker-on-image--coming-soon { top: calc(7.8vw); left: 18vw; }
}

@media only screen and (max-width: 420px /* if you change this max-width, you must update main.js too */)
{
  .strain-hero__status-sticker-on-image--coming-soon { top: calc(9.4vw); left: 18vw; }

  .strain-hero__percent-wrapper { height: 24px; width: 240px; }
  /* creates the < shape on left */
  .strain-hero__percent-filled-left { flex: 0 0 24px; height: 24px; margin-left: -1px; }
  /* creates the < shape on right; more complex because requires two divs inside */
  .strain-hero__percent-filled-right { flex: 0 0 24px; height: 24px; }
  .strain-hero__percent-filled-right-top { flex: 0 0 24px; height: 24px; }
  .strain-hero__percent-filled-right-bottom { flex: 0 0 24px; height: 24px; }
  .strain-hero__percent-bg-that-sits-on-top { height: 24px; width: 240px; margin-top: -34px; background: url('/img/strain-hero__percent-wrapper-bg.svg') top left / contain no-repeat; position: relative;
      z-index: 3; }
}

@media only screen and (max-width: 389px /* if you change this max-width, you must update main.js too */)
{
  .strain-hero__status-sticker-on-image--coming-soon { top: calc(11vw); left: 18vw; }
}

/* very wide */
@media only screen and (min-width: 1601px)
{
  .strain-hero__inner-inner { padding-top: 0; /* the blankness on the JPG itself provides the padding-top now */  }
  
  .strain-hero__left-column {/* flex: 1.2;*/ }
  .strain-hero__right-column { padding-right: 60px; }

  .strain-hero__heading { font-size: 64px; }

}






/* -------------------------------------------------------------------------- */
/* strain info and floating image container
/* -------------------------------------------------------------------------- */

.strain-info-and-floating-image-container { padding: 80px var(--page-content-horizontal-padding) 80px; position: relative; }

.strain-info-and-floating-image-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 42%;
  height: 100%;
  background: url(/img/bg-layer/bg-layer-rectangle-horizontal-tilted-dots-space-on-right.png) no-repeat left top / 1000px;
  background-size: contain;
  z-index: 5;
  /* filter: opacity(.5); */
}

.strain-info-and-floating-image-container__inner { max-width: 1660px; margin: auto; display: flex; flex-flow: row wrap; align-items: space-between; }

@media only screen and (max-width: 3400px)
{
  .strain-info-and-floating-image-container::before { width: 40%; }
}
@media only screen and (max-width: 2600px)
{
  .strain-info-and-floating-image-container::before { width: 38%; }
}
@media only screen and (max-width: 2200px)
{
  .strain-info-and-floating-image-container::before { width: 35%; }
}
@media only screen and (max-width: 1837px)
{
  .strain-info-and-floating-image-container::before { width: calc( var(--page-content-horizontal-padding) + 480px ); }
}



@media only screen and (max-width: 1200px)
{
  .strain-info-and-floating-image-container { padding-left: 60px; padding-right: 60px; }
  .strain-info-and-floating-image-container::before { width: calc( 60px + 480px ); }
}
@media only screen and (max-width: 1079px)
{
  .strain-info-and-floating-image-container::before { width: calc( var(--page-content-horizontal-padding) + 500px ); }
}
@media only screen and (max-width: 970px)
{
  .strain-info-and-floating-image-container::before { width: 56%; }
}
/* we're on stacked layout here so apply layered BG image to bottom section now */
@media only screen and (max-width: 900px)
{
  .strain-info-and-floating-image-container::before { background: none; /* bg now handled by ".strain-info", which is BELOW this section because it's a separarate BEM block */ }
}

@media only screen and (max-width: 600px)
{
  .strain-info-and-floating-image-container { padding: 30px var(--page-content-horizontal-padding) 60px; }
}





/* -------------------------------------------------------------------------- */
/* strain info
/* -------------------------------------------------------------------------- */

.strain-info { borders:solid 1px red; flex: 1; max-width: 440px; position: relative; z-index: 6; }

.strain-info__row { display: flex; flex-flow: row nowrap; gap: 30px; justify-content: flex-start;  }

.strain-info__heading { flex: 0 0 120px; padding-top: 30px; text-align: right; color: var(--blue); font-family: var(--xrx-bold); font-size: 16px; }
.strain-info__details { flex: 1; border-top: 1px solid var(--light-color); padding: 20px 0 30px; color: var(--light-color); font-family: var(--futura); font-size: 24px; line-height: 1.2; }
.strain-info__details--disclaimer { padding: 20px 0 20px; font-family: var(--extended-bold); font-size: 8px; line-height: 1.4; }
.strain-info__details--divider { border-top: none; padding: 0; }
.strain-info__details--no-border-top { border-top: none; }
.strain-info__details--no-border-bottom { border-bottom: none; }
.strain-info__details--where-to-buy { border-top: none; padding-top: 40px; padding-bottom: 0; }
.strain-info__details--products { display: flex; flex-flow: row wrap; }
.strain-info__details--multi-pack-logo { text-align: center; }
/*.strain-info__details--multi-pack-products { display: flex; }*/

.strain-info__multi-pack-logo { max-width: clamp(100px, 80%, 260px); }

/* no BEM for this because used in mutliple places and called via PHP */
.strain-info__details .thc-subtext { font-family: var(--extended-bold) /*bulk-font-edit-5.45*/; color: var(--light-color); font-size: 16px; line-height: 1.2; }


/* products are more complex because we need icon to flex-left always */
.strain-info__product-row { flex: 0 0 100%; display: flex; align-items: flex-start; flex-flow: row wrap; margin-bottom: 20px; }
.strain-info__product-row--companion-product { margin-bottoms: 0; }

.strain-info__product-icon { flex: 0 0 38px; width: 38px; text-align: center; display: flex; align-items: center; margin-right: 12px; justify-content: center; align-self: center; /*margin-bottom: 16px;*/ }
.strain-info__product-icon--specs-section { /*margin-top: 12px;*/ }

.strain-info__product-icon-image { max-height: calc(36px * 1.25); vertical-align: middle; }

.strain-info__product-text { flex: 0 0 calc(290px - 50px - 50px); margin-right: 12px; padding-bottom: 0; margin-right: 0; }
.strain-info__product-text--companion-product { padding-bottoms: 20px; }

.strain-info__also-available { font-family: var(--xrx-bold); font-size: 14px; }

.strain-info__also-available-arrow-container { flex: 0 0 40px; display: flex; align-items: center; align-self: center; }
.strain-info__also-available-arrow { width: 100%x; margin-left: 3px; }


@media only screen and (max-width: 1000px)
{

}

@media only screen and (max-width: 900px)
{
  .strain-info { order: 2; flex-basis: 100%; max-width: none; }
  .strain-info::before {
    content: "";
    position: absolute;
    top: calc(-110px + 2vw);
    left: -60%;
    width: /*max(300px, */160%/*)*/;
    height: 100%;
    background: url(/img/bg-layer/bg-layer-rectangle-horizontal-tilted-dots-space-on-right.png) no-repeat left top / 1000px;
    background-size: contain;
    z-index: 3;
    /* filter: opacity(.5); */
  }
  
  .strain-info__row { flex-flow: column nowrap; gap: 0; z-index: 4; position: relative; }
  .strain-info__heading { text-align: left; flex-basis: 100%; padding-top: 24px; padding-bottom: 6px; }
  .strain-info__heading--divider { padding: 0; }
  .strain-info__heading--products { padding-bottom: 18px; }
  .strain-info__details { padding: 0 0 30px; border-top: none; border-bottom: 1px solid var(--light-color); }
  .strain-info__details--divider { padding: 0; border-bottom: none; }
  .strain-info__details--products { padding: 0; border-bottom: none; }
  .strain-info__details--where-to-buy { padding: 0; border-bottom: none; text-align: center; }
}

@media only screen and (max-width: 600px)
{
  .strain-info::before { top: calc(-90px + 2vw); background: none; }
}
@media only screen and (max-width: 540px)
{
  .strain-info::before { top: calc(-70px + 2vw); }
}
@media only screen and (max-width: 400px)
{
  .strain-info::before { top: calc(-50px + 2vw); }
}



/* -------------------------------------------------------------------------- */
/* floating image
/* -------------------------------------------------------------------------- */



/* nug - contents */
.floating-image { flex: 1; bordesr:solid 1px red; z-index: 4; position: relative; margin-left: -40px; }

.floating-image__inner { position: sticky; top: 0; /*width: 88%;*/ /*margin: 0 auto;*/ /*border: 4px solid #1e1e1e; *//*box-shadow: 8px 8px 0 0 #1e1e1e; background: url(/img/strains/shadowbox-bg.jpg?v=1) center center/cover #f9f8f1; *//*transform: translateX(4px);*/ /*padding-top: 4.2%; padding-left: 50px; padding-right: 50px;*/ }

.floating-image__image { max-width: 100%; }

@media only screen and (max-width: 900px)
{
  .floating-image { order: 1; flex-basis: 100%; margin-left: unset; }
}

@media only screen and (max-width: 600px)
{
  .floating-image {  }
}


/* -------------------------------------------------------------------------- */
/* compare
/* -------------------------------------------------------------------------- */

.compare { /*background: var(--violet-light);*/ padding: 60px 0 120px; color: var(--light-color); position: relative; }
.compare::before {
  content: "";
  position: absolute;
  top: -900px;
  right: 0;
  width: 49vw;
  height: 100%;
  background: url(/img/bg-layer/bg-layer-rectangle-vertical-blotchy.png) right top / min(1000px, 100%) no-repeat ;
  z-index: 3;
  /* filter: opacity(.5); */
}

.compare__inner { margin: 0 var(--page-content-horizontal-padding); z-index: 4; position: relative; }

.compare__heading { margin: 0 0 100px 0; text-align: center; font-family: var(--futura); font-size: var(--heading-font-size); }

.compare * { borders:solid 1px red; }

.compare__table-container { display: flex; }

.compare__left { flex: 0 0 220px; /* the compare__slide-out must match this width always (or be less than this) */ }
.compare__right { flex: 1; display: grid; grid-template-columns: 25% 25% 25% 25%; }

.compare__col { }

.compare__col-heading { 
    font-family: var(--futura); 
    /*font-weight: 500;*/
    font-size: 18px;
    line-height: 1;
    letter-spacing: 2px;
    color: var(--light-color);
    /*display: block;*/
    text-transform: uppercase;
    margin: 0 0 10px 0;
    padding: 10px 24px;
    height: 32px;
    position: relative;
    text-decoration: underline;
}
.compare__col-heading--products {
  text-decoration: none;
}


.compare__col-heading-popup-toggle { cursor: pointer; }

.compare__col-heading--strain-names { font-family: var(--extended-bold) /*bulk-font-edit-5.45*/; font-size: 9px; letter-spacing: 0; text-transform: none; text-decoration: none; padding: 0; /*background: url(/img/compare__arrow.svg) no-repeat left center / contain;*/ }
.compare__hover-over-terms { position: absolute; left: 0; bottom: 4px; }

.compare__strain-name-panel { height: 130px; position: relative; }

.compare__strain-name-link { height: 100%; padding: 5px 5px; display: flex; /*border-top-left-radius: 10px; border-bottom-left-radius: 10px;*/ margin: 0; position: relative; display: flex; align-items: center; justify-content: center; z-index: 2; border: 1px solid var(--light-color); border-bottom: none; }
.compare__strain-name-link--last { border-bottom: 1px solid var(--light-color); }

.compare__strain-info-panel { height: 130px; margin: 0; /*background-color: var(--violet);*/ border: 1px solid var(--light-color); border-bottom: none; padding: 0 24px; display: flex; align-items: center; font-family: var(--xrx-bold); line-height: 1.4; }
.compare__strain-info-panel--indica-or-sativa { text-transform: uppercase; }
.compare__strain-info-panel--available-formats { /*border-top-right-radius: 10px; border-bottom-right-radius: 10px;*/ }
.compare__strain-info-panel--last { border-bottom: 1px solid var(--light-color); }

/* custom sizes for each compare strain logo */
:root
{
  --compare-strain-name-image-base-width: 66.66%;
}
.compare__strain-name-image { flex-basis: 100%; margins: 20px; max-width: var(--compare-strain-name-image-base-width); }


.compare__strain-info-panel .thc-subtext { font-family: var(--extended-bold) /*bulk-font-edit-5.45*/; color: var(--light-color); font-size: clamp(12px, 1vw, 14px); line-height: 1.2; }



/* this slide out that's only on JACKFRUIT currently */
.compare__jackfruit-comes-in { display: none; color: var(--dark-text-color); max-width: calc(var(--compare-strain-name-image-base-width) + 22%); }
.compare__jackfruit-comes-in-text-top { text-align: center; font-family: "Vacation-Heavy"; font-size: 19px; }
.compare__jackfruit-comes-in-text-bottom { margin-top: 8px; padding: 11px 0 10px 8px; background: url(/img/compare__jackfruit-comes-in-text-bottom-bg.svg) no-repeat center center / contain; font-family: "Bookmania-Bold"; font-size: 11px; text-align: left; }

.compare__slide-out { width: 200px; /* this must match or be less than compare__left always */ height: 130px; position: absolute; top: 0; right: 0; lefts: 100%; border-top-left-radius: 10px; border-bottom-left-radius: 10px; z-index: 1; display: flex; flex-flow: column nowrap; overflow: hidden; padding-left: 2px; background-color: var(--violet-light); /*transform: translateX(100%);*/ }
.compare__slide-out[data-compare-slide-out="is-hidden"] { /*width: 200px !important;*/ /* this must match or be less than compare__left always */ /*transition: none !important;*/ }

.compare__slide-out-strain { background-color: #f38120; flex-basis: 100%; display: flex; align-items: stretch; justify-content: center; }
.compare__slide-out-strain--bottom { background-color: #cceaf1; }

.compare__slide-out-strain:hover { background-color: #d4642e; }
.compare__slide-out-strain--bottom:hover { background-color: #8fb0ca; }


/*.compare__slide-out-strain { background: #333; }*/ /* temporary */
/*.compare__slide-out-strain--bottom { background: #111; }*/ /* temporary */


.compare__slide-out-strain-link { flex-basis: 100%; display: flex; align-items: center; justify-content: center; }
.compare__slide-out-strain-name-image { width: 56%; }


/* the floating/hidden col popup info text */

.compare__col-popup-info { 
    position: absolute;
    /*bottom: 100%;*/
    left: 0;
    /*margin-bottom: 12px;*/
    margin-top: 12px;
    background-color: var(--light-color);
    color: var(--dark-text-color);
    padding: 20px;
    border-radius: 10px;
    font-family: var(--extended-bold) /*bulk-font-edit-5.45*/;
    line-height: 1.2;
    font-size: 14px;
    text-transform:  none;
    letter-spacing: 0;
    width: 100%;
    opacity: 0;
    pointer-events: none;
    transition: all .3s;

    bottom: auto; top: 100%; margin-bottom: 0; 

}

.compare__col-popup-info:after {
    position: absolute;
    /*top: 100%;*/
    left: 24px;
    content: " ";
    display: block;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid var(--light-color);

    top: auto; bottom: 100%; transform: rotate(180deg); 
}


@media only screen and (max-width: 2000px)
{
  .compare::before {
    top: -46vw;
    right: 0;
    width: 47vw;
    height: 100%;
    background: url(/img/bg-layer/bg-layer-rectangle-vertical-blotchy.png) right top / min(1000px, 100%) no-repeat ;
  }
}

@media only screen and (max-width: 1500px)
{
  .compare__left { flex-basis: 200px; }

  .compare__col-heading { padding-left: 16px; padding-right: 16px; }

  .compare__col-heading--strain-names { position: relative; font-size: 11px; }
  .compare__hover-over-terms {  }
  .compare__over-terms { displays: none; }

  .compare__strain-info-panel { padding-left: 16px; padding-right: 16px; }

  .compare__strain-info-panel { font-size: min(1.4vw, 16px); }
  .compare__strain-info-panel--terpenes { font-size: min(1.2vw, 16px); }
  .compare__strain-info-panel--available-formats { font-size: min(1.2vw, 16px); }

  .compare__jackfruit-comes-in-text-top { font-size: 17px; }
  .compare__jackfruit-comes-in-text-bottom { padding-top: 10px; font-size: 10px; }
  .compare__slide-out { width: 200px; }
  .compare__slide-out[data-compare-slide-out="is-hidden"] {/* width: 200px !important;*/ /* this must match or be less than compare__left always */ /*transition: none !important;*/ }
}

/*@media only screen and (max-width: 1200px)
{
  .compare__inner { margin-left: 60px; margin-right: 60px; }
}*/

@media only screen and (max-width: 1080px)
{
  .compare__left { flex-basis: 120px; }

  .compare__strain-name-panel { padding: 0; }

  .compare__col-heading--strain-names { visibility: hidden; }

  .compare__jackfruit-comes-in-text-bottom { padding: 0; text-align: center; background: none; }
  .compare__slide-out { width: 120px; }
  .compare__slide-out[data-compare-slide-out="is-hidden"] { width: 120px !important; /* this must match or be less than compare__left always */ transition: none !important; /* needed so that, if you resize your browser and this has inline width provided by JS, we instantly make this narrow enough to hide properly */ }
}

/*@media only screen and (max-width: 1500px)
{
  .compare__strain-name-panel { padding-left: 15px; padding-right: 15px; }
}*/

@media (max-width: 960px)
{
  .compare__right {
      /*padding-top: 6px;*/
      width: calc(100% - 120px);
      margin-right: calc( var(--page-content-horizontal-padding) * -1);
      overflow-x: auto;
      overflow-y: hidden;
      grid-template-columns: repeat(4,20vw) 24px;
      -webkit-overflow-scrolling: touch;
  }

  .compare__strain-info-panel { font-size: 12px; }

  /*.compare__col-popup-info { bottom: auto; top: 100%; margin-bottom: 0; width: 150%; }
  .compare__col-popup-info:after { top: auto; bottom: 100%; transform: rotate(180deg); left: 14px; }*/
  .compare__col-popup-info { width: 130%; /* otherwise the word "Tetrahydrocannabinol" is too long for the box */ }
}

@media only screen and (max-width: 900px)
{
  .compare::before {
    top: -74vw;
    right: 0;
    width: 80vw;
    height: 100%;
    background: url(/img/bg-layer/bg-layer-rectangle-vertical-blotchy.png) right top / min(1000px, 100%) no-repeat ;
  }
}

@media (max-width: 760px)
{
  .compare__right { grid-template-columns: repeat(4,150px) 20px; }
}

@media (max-width: 600px)
{
  .compare::before { background: none; }

  .compare__inner { margin-left: 20px; margin-right: 20px; }
  
  .compare__heading { margin-bottom: 38px; }

  .compare__right { grid-template-columns: repeat(4,150px) 20px; }

  .compare__slide-out-strain-link { width: 66%; }
}

@media (max-width: 400px)
{
  .compare__heading { font-size: 15vw; }
}




/* -------------------------------------------------------------------------- */
/* all products page ("DRIED FLOWER", "VAPORIZERS", "PRE-ROLLS")
/* -------------------------------------------------------------------------- */

.products { padding: 0 0 calc( var(--section-divider-height) + var(--vertical-margin-between-carousels) ) 0; /* needed because the carousels in here (.carousel--products-page) have -40px margin-bottom, so if you adjust that, adjust this accordingly */ font-family: var(--extended-bold) /*bulk-font-edit-5.45*/; font-weight: bold; color: var(--light-color); font-size: 22px; line-height: 1.2; flex: 1; position: relative; /* so the absolutely-positioned bg images that are added via "before" and "position: absolute;" work properly */ z-index: 3; }

.products__inner { padding: 0 80px; }

.products__heading-container { /*display: flex; flex-flow: row wrap; align-items: stretch; gap: 24px;*/ padding: clamp(40px, 6vw, 90px) var(--page-content-horizontal-padding) 60px; /*background: url(/img/products__flower-bg.jpg) no-repeat right center / contain;*/ }
.products__heading-container--king-size { padding-top: 90px; }
/*.products__heading-container--dried-flower { padding-top: 90px; } */ /* unhide if BZAM NUGS becomes top section again */
/*.products__heading-container--vaporizers { background-image: url(/img/products__vaporizers-bg.jpg); }
.products__heading-container--pre-rolls { background-image: url(/img/products__pre-rolls-bg.jpg); }*/

.products__heading-container { position: relative; }

/*.products__heading-container--vaporizers::before { background-image: url(/img/products__vaporizers-bg.jpg); }
.products__heading-container--pre-rolls::before { background-image: url(/img/products__pre-rolls-bg.jpg?v=2); }*/

.products__heading-container--lighten-bg::before { filter: opacity(.6); }
.products__heading-container--pre-rolls.products__heading-container--lighten-bg::before { background-position: right calc(-6vw) center; } /* pre-rolls needs to move right more because it's a busier image */
.products__heading-container--cover-bg::before { background-size: cover; background-position: right calc(-13vw) center; }
.products__heading-container--pre-rolls.products__heading-container--cover-bg::before { background-size: cover; background-position: right calc(-18vw) center; } /* pre-rolls needs to move right more because it's a busier image */
.products__heading-container--cover-bg-more::before { filter: opacity(.3); background-size: cover; background-position: right calc(-20vw) center; }

.products__heading-container-inner { position: relative; display: flex; flex-flow: row wrap; align-items: flex-end; gap: 0 clamp(24px, 2%, 50px); }

.products__heading { flex: 0 0 auto; /*display: flex; align-items: center;*/ font-size: var(--heading-font-size); font-family: var(--futura); }
.products__heading--clear-right { flex-basis: 100%; }
[data-products-heading-line-before-subheading="put-subheading-below"] { flex-basis: 100%; margin-bottom: 20px; }

.products__count { margin-left: 10px; font-size: 32px; /*flex: 0 0 clamp(46px, 2vw, 68px); display: flex; align-items: stretch; justify-content: center;*/ font-family: var(--extended-bold); }
/*.products__heading--dried-flower-mobile { display: none; }*/

.products__subheading { flex: 1; max-widths: 46ch; padding-bottom: 6px; font-size: 18px; }

/*.products__heading-image { max-width: 100%; height: clamp(40px, 3vw, 72px); }*/

.products__count-number { font-size: 28px; font-family: var(--extended-bold); }

/*.products__carousel-container { margin-top: -180px; }*/

@media only screen and (max-width: 1400px)
{
  .products__subheading { /*flex: 0 0 100%;*/ }
}

@media only screen and (max-width: 1000px)
{
  /* heading area - reduce vertical spacing */
  /*.products__heading-container { padding-top: 150px; }
  .products__heading-container--vaporizers { padding-top: 150px; }
  .products__heading-container--pre-rolls { padding-top: 150px; }*/
}

@media only screen and (max-width: 800px)
{
  /*.products__heading-image { height: 37px; }*/
}

@media only screen and (max-width: 767px)
{
  /* heading area - reduce vertical spacing */
  .products__heading-container { padding-top: 50px; }
  .products__heading-container--king-size { padding-top: 86px; }
  /*.products__heading-container--dried-flower { padding-top: 86px; }*/ /* unhide if BZAM NUGS becomes top section again */

}

@media only screen and (min-width: 601px)
{

  /* layered BGs that don't show on mobile  */
  .products--dried-flower,
  .products--king-size {
    background:
      url('/img/bg-layer/bg-layer-rectangle-horizontal-level-grid-space-on-right.png') -112vw top / 140% no-repeat,
      /*url('/img/bg-layer/bg-layer-rectangle-horizontal-level-grid-space-on-right.png') -900px 200px / 1000px no-repeat,*/
      url('/img/bg-layer/bg-layer-rectangle-horizontal-tilted-dots-space-on-left.png') right 14% / 40% no-repeat;
      z-index: 4;
  }

  .products--vaporizers::before,
  .products--dunkd::before {
    content: "";
    position: absolute;
    top: -300px;
    left: -50px;
    width: 100%;
    height: 1030px;
    background: url('/img/bg-layer/bg-layer-rectangle-vertical-blotchy.png') no-repeat left top / 1000px;
    background-size: contain;
    /*filter: opacity(.5);*/
  }

  .products--limited-release::before,
  .products--hash::before,
  .products--pre-rolls::before {
    content: "";
    position: absolute;
    top: -150px;
    left: -50px;
    width: 100%;
    height: 420px;
    background: url('/img/bg-layer/bg-layer-rectangle-horizontal-tilted-dots-space-on-right.png') no-repeat left top / 1000px;
    background-size: contain;
    /*filter: opacity(.5);*/
  }

}

@media only screen and (max-width: 600px)
{
  .products__count { flex-basis: 36px; }
  body.user-is-on-mac .products__count-oval { padding: 3px 5px 3px 3px; }
  
  .products__heading-container::before { background: none; }

  .products__heading { flex-basis: 100%; }
  /*.products__heading--dried-flower { display: none }*/
  /*.products__heading--dried-flower-mobile { display: block; }*/
  
  /*.products__heading-image { height: 9.2vw; }*/
  /*.products__heading-image--dried-flower-mobile { height: calc(2.275 * 8vw); }*/ /* this one needs to be 2.275x taller than the other heading-images for the font-size to appear to be the same as the one-line SVG heading images */

  .products__subheading { margin-left: 0; font-size: 20px; padding-right: 20vw; }
  .products__subheading br { display: none; }

}

@media only screen and (max-width: 400px)
{
  .products__subheading { padding-right: 0; }
}



/* -------------------------------------------------------------------------- */
/* stockists page
/* -------------------------------------------------------------------------- */

.stockists {  }



.stockists__top { padding: 150px var(--page-content-horizontal-padding) 30px; position: relative; z-index: 3; display: flex; flex-flow: row wrap; align-items: flex-end; }

.stockists__bottom { padding: 40px var(--page-content-horizontal-padding) calc( var(--section-divider-height) + 60px ); /* no padding-right because the stockist map should touch the right-side of page according to mockup */ position: relative; /* needed because otherwise if you start on mobile width and then go to desktop width the map takes over the entire page and for z-index */ z-index: 3; }

.stockists__iframe-container { width: 100%; height: 100%; position: relative; min-height: 600px; }
.stockists__iframe { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; }


.stockists__heading { flex-basis: auto; margin-right: 30px; font-family: var(--futura); color: var(--light-color); font-size: var(--heading-font-size); }

.stockists__subheading { flex: 1; font-family: var(--extended-bold) /*bulk-font-edit-5.45*/; color: var(--light-color); font-size: 16px; line-height: 1.3; }

.stockists__paragraph { margin-top: 20px; max-width: 520px; font-family: var(--extended-bold) /*bulk-font-edit-5.45*/; color: var(--light-color); font-size: 16px; line-height: 1.3; }
.stockists__paragraph--provincial-retailers { max-width: 510px; }

.stockists__br { display: none; }


.stockists__retailers { padding: 110px var(--page-content-horizontal-padding) 140px; display: flex; flex-flow: row wrap; gap: 60px 20px; position: relative; z-index: 3; }

.stockists__retailers-left { flex: 0 0 calc( ( 100% + var(--page-content-horizontal-padding) ) * .4 ); /* we need this fancy width calculation because we want this to be the same width as the left half of the Stockists widget but the Stockists widget doesn't have the right-margin (it touches the right edge of page) so it's wider than most elements */ } 
.stockists__retailers-right { flex: 1; max-width: 840px; display: flex; flex-flow: row wrap; gap: 48px 20px; align-items: flex-start; }

.stockist__retailers-card { position: relative; flex: 0 0 calc(50% - 10px); display: flex; gap: 14px; borders:solid 1px red; }
/*.stockist__retailers-card--last { flex: 0 0 100%; }*/

.stockists__retailers-flag { flex: 0 0 130px; text-align: right; borders:solid 1px red; }
.stockists__retailers-flag-image { max-widths: 100%; height: 90px; }
.stockists__retailers-text { flexs: 0 0 50%; }
.stockists__retailers-heading { font-family: var(--futura); color: var(--light-color); font-size: 28px; line-height: 1.2; margin-bottom: 12px; }
.stockists__retailers-subheading { font-family: var(--extended-bold-underlined) /*bulk-font-edit-5.45*/; color: var(--light-color); font-size: 17.5px; font-weight: bold; }

/* the popup box just for BC */
.stockists__retailers-bc-infobox { display: none; width: 100%; max-width: 200px; text-align: center; line-height: 1.2; background: var(--light-color); color: var(--dark-text-color); padding: 8px; position: absolute; top: 14px; left: 30px; box-shadow: 0 0 6px 0px rgb(0 0 0 / 70%); }


@media only screen and (max-width: 1500px)
{
  /*.stockists__retailers-flag-image { height: 56px; }
  .stockists__retailers-heading { font-size: 28px; }
  .stockists__retailers-subheading { font-size: 16.5px; }*/
}



@media only screen and (max-width: 1360px) and (min-width: 1161px)
{
  .stockists__top { background-size: calc(110% + (10vw) ); background-position: center right -27vw; }

  .stockists__retailers-flag-image { height: 80px; }
  .stockists__retailers-heading { font-size: calc(24px - .1vw); }
  .stockists__retailers-subheading { font-size: 14px; }

  .stockists__retailers-bc-infobox { top: 10px; }

}

@media only screen and (max-width: 1240px)
{
  /*.stockists__retailers-flag-image { height: 46px; }
  .stockists__retailers-heading { font-size: calc(18.6px - .1vw); }
  .stockists__retailers-subheading { font-size: 15px; }*/
}

@media only screen and (max-width: 1160px)
{
  .stockists__retailers-left { flex: 0 0 100%; }
  .stockists__retailers-right { flex: 1; /*max-width: 700px;*/ }

  .stockists__paragraph--provincial-retailers { max-width: 100%; }

  .stockist__retailers-card { flex-basis: calc(50% - 10px); }
  /*.stockists__retailers-flag-image { height: 52px; }
  .stockists__retailers-heading { font-size: 18px }
  .stockists__retailers-subheading { font-size: 16px; }*/
}

@media only screen and (max-width: 1100px)
{
  .stockists__top { background-size: calc(  ); background-position: center right -36vw; }
  .stockists__top { background-size: calc( 150% - -10vw); background-position: center right -36vw; }

}

@media only screen and (max-width: 900px)
{
  .stockists__paragraph--provincial-retailers { max-width: 510px; }
}

@media only screen and (max-width: 900px) and (min-width: 601px)
{
  
  .stockists__retailers-flag-image { height: 80px; }
  .stockists__retailers-heading { font-size: calc(24px - .1vw); }
  .stockists__retailers-subheading { font-size: 14px; }
  /*.stockists__br { display: inline; }*/
}

/* this is when stockist switches to mobile (stacked) layout */
@media only screen and (max-width: 768px)
{
  .stockists__top { padding-tops: 100px; padding-bottom: 10px; }
  .stockists__bottom { padding-right: 40px; }

  
}

@media only screen and (max-width: 700px)
{  
  .stockists__heading { flex: 0 0 100%; }
  .stockists__subheading { flex: 0 0 100%; margin-top: 20px; }
  
  .stockist__retailers-card { flex-basis: calc(100%); }
}

@media only screen and (min-width: 601px)
{
  .stockists::before {
    content: "";
    position: absolute;
    top: 4%;
    right: 0;
    width: 42%;
    height: 80%; /* if you set this to 100%, it makes the page "too tall", aka there's emtpy space below the bottom-ticker (bottom-ticker not glued to bottom of window) */
    background: url(/img/bg-layer/bg-layer-rectangle-vertical-blotchy.png) no-repeat left top / 1000px;
    background-size: contain;
    z-index: 2;
    /* filter: opacity(.5); */
  }
}

@media only screen and (max-width: 600px)
{
  .stockists__top { background-image: none; padding-top: 100px; padding-bottom: 10px; }

  /*.stockists__heading { font-size: 48px; }*/
  .stockists__retailers-heading-wrapper {  }

  .stockists__retailers { padding-top: 80px; }
}

@media only screen and (max-width: 480px)
{
  .stockists__retailers-heading { font-size: 5.8vw; }
  .stockists__retailers-subheading { font-size: 3.6vw; }
  .stockists__retailers-flag { flex-basis: 22vw; }
  .stockists__retailers-flag-image { height: 14vw; }
}
@media only screen and (max-width: 400px)
{
  .stockists__heading { font-size: 12vw; }
}






/* -------------------------------------------------------------------------- */
/* about page
/* -------------------------------------------------------------------------- */

.page-container--about-page { background: url('/img/about/about-section-1.jpg?v=2') right 46px / clamp(500px, 60%, 1080px) no-repeat; }

.about-heading { margin-top: 145px; z-index: 4; position: relative; }


.about-section { margin: 0 var(--page-content-horizontal-padding-about-and-legal-pages) 0; padding-bottom: 30px; position: relative; z-index: 3; }
.about-section--1 { min-height: 610px; /* so the whole HI HO image shows; JS might override this */ margin-top: var(--menu-bar-height); padding-bottom: 60px; }
.about-section--2 { z-index: 4; }
.about-section--3 {  }
.about-section--4 { margin-bottom: 120px; }

.about-section__inner { display: flex; flex-flow: row wrap; justify-content: flex-start; align-items: center; gap: 30px; max-width: 1400px; margin: auto; /*background: url(/img/about/about-section-1.jpg?v=2) no-repeat center right / contain;*/ position: relative; z-index: 3; }
.about-section__inner--1 { min-height: 610px; align-items: flex-end; /*background: url('/img/about/about-section-1.jpg?v=2') right top / 1000px no-repeat;*/ height: 100%; }

.about-section__inner--text-right { justify-content: flex-end;  }


.about-section__text-container { flex: 0 0 50%; borders:solid 1px red; z-index: 3; }
.about-section__image-container { flex: 1; borders:solid 1px red; z-index: 2; /*transform: scale(1.5) translateX(-8%);*/ }
.about-section__image-container--1 { display: none; }

.about-section__heading { font-family: var(--futura); font-size: 32px; color: var(--light-color); margin-bottom: 30px; }
.about-section__heading--main { padding-top: 40px; font-size: var(--heading-font-size); }
.about-section__heading--want-to-learn-more { text-align: center; padding: 56px var(--page-content-horizontal-padding-about-and-legal-pages); margin-bottom: 8px; line-height: 1.6; }

.about-section__paragraph { font-family: var(--xrx-bold); font-size: 16px; line-height: 1.5; }
.about-section__paragraph--main { line-height: 2; margin-bottom: 40px; font-size: 18px; line-height: 1.6; }

.about-section__link { color: var(--orange); }
.about-section__link:hover { color: var(--hover-color); }

.about-section__image { max-width: 100%; transform: }

@media only screen and (max-width: 2000px)
{
  .about-section--4 { margin-bottom: 60px; }
}

@media only screen and (max-width: 1780px)
{
  .about-section--1 { min-height: 34vw; }
  .about-section__inner--1 { min-height: 34vw; /*background: url('/img/about/about-section-1.jpg?v=2') right top / contain no-repeat;*/ height: 100%; }
}

@media only screen and (max-width: 1330px)
{

  .about-section__heading--main { padding-top: 8vw; }

  .about-section--1 { /*min-height: unset; margin-bottom: 20px;*/ }
  
  .about-section__inner--1 { /*min-height: unset;*/ /*background: url('/img/about/about-section-1.jpg?v=2') right top / 72% no-repeat;*/ height: 100%; }

  .about-section__paragraph--main { margin-bottom: 10px; }


  /*.about-section__text-container--1 { flex-basis: 100%; }*/

}

@media only screen and (max-width: 1200px)
{
  .about-section--1 { min-height: unset; padding-bottom: 40px; }

  .about-section__inner--1 { min-height: unset; }
  .about-section__inner--2 { padding-left: 60px; padding-right: 60px; }
  .about-section__inner--3 { padding-left: 60px; padding-right: 60px; }

}


@media only screen and (max-width: 1079px)
{
  .about-heading { margin-bottom: 40px; }

  .about-section__heading--main { padding-top: 5vw; }
}

@media only screen and (min-width: 740px)
{
  /* layered BGs only show on larger-than-mobile devices */
  .about-section--3:before{
    content: "";
    position: absolute;
    top: -50%;
    left: calc(var(--page-content-horizontal-padding-about-and-legal-pages) * -1);
    width: max(36%, 300px);
    height: 100%;
    borders: solid 1px red;
    background: url(/img/bg-layer/bg-layer-square-tilted-dots-space-on-right-smaller.png) no-repeat left center / contain;
    z-index: 2;
    /* filter: opacity(.5); */
  }
  .about-section--3:after{
    content: "";
    position: absolute;
    bottom: 0;
    right: 12%;
    width: 20%;
    height: 174%;
    borders: solid 1px red;
    background: url(/img/bg-layer/bg-layer-rectangle-vertical-dots-subbtle.png) no-repeat right bottom / contain;
    z-index: 2;
    /* filter: opacity(.5); */
  }
}

@media only screen and (max-width: 739px)
{
  .about-heading { margin-top: 80px; width: 200%; transform: translateX(-20px); }
  .about-section__heading--main { margin-top: 6vw; }
  .about-section__heading--want-to-learn-more { line-height: 1.4; }
  
  .about-section__image-container { flex-basis: 100%; }
  .about-section__text-container { flex-basis: 100%; text-align: left; borders:solid 1px red; }

  .about-section__paragraph--main { line-height: 1.7; }

  .wavy-text--about-page { display: none; }



  .page-container--about-page { background: url('/img/about/about-section-1.jpg?v=2') center 46px / 100% no-repeat; }

  /* for the top section ("ABOUT BZAM"), we now show the actual "HI HO" <img> rather than using it as bg image */
  .about-section--1 { min-height: unset; margin-top: calc(61vw + 20px); margin-bottom: 50px; }
  .about-section__inner--1 { background: none; }
  /* extra left/right spacing is only for non-stacked layout */
  .about-section__inner--2 { padding-left: 0; padding-right: 0; }
  .about-section__inner--3 { padding-left: 0; padding-right: 0; }
  
  .about-section__text-container--1 { flex-basis: 100%; }
  /*.about-section__image-container--1 { flex-basis: 100%; display: block; }*/

  .about-section__main-br { display: none; /* so ABOUT BZAM is on one line */ } 

  .about-section__paragraph--main { margin-bottom: 0; }

}




/* -------------------------------------------------------------------------- */
/* legal pages (this is also "shared" by the contest page)
/* -------------------------------------------------------------------------- */


.legal-text { padding: calc( var(--menu-bar-height) + 110px ) var(--page-content-horizontal-padding-about-and-legal-pages) 60px; }

.legal-text__inner { max-width: 1200px; margin: auto; }

.legal-text__heading-and-updated-date { display: flex; flex-flow: row wrap; align-items: center; margin-bottom: 40px; }

.legal-text__heading { flex: 1; font-family: var(--futura); color: var(--light-color); font-size: 42px; line-height: 1.2; margin-right: 40px; }
.legal-text__subheading { font-family: var(--futura); color: var(--light-color); font-size: 42px; line-height: 1.2; margin-top: 0.8em; margin-bottom: .8em; }
.legal-text__subheading--contest-rules { font-size: 28px; margin-bottom: 1.6em; }

.legal-text__updated-date { /*flex: 0 0 300px;*/ border: 2px solid var(--light-color); padding: 12px 20px; border-radius: 8px; font-family: var(--extended-bold) /*bulk-font-edit-5.45*/; color: var(--light-color); font-size: 16px; line-height: 1.3; }


.legal-text ul { margin-left: 20px; margin-bottom: 1.3em; }

.legal-text p,
.legal-text li { font-family: var(--extended-bold) /*bulk-font-edit-5.45*/; color: var(--light-color); font-size: 14px; line-height: 1.3; margin-bottom: 1.3em; }

.legal-text li { margin-bottom: .3em; margin-left: 20px; list-style-type: disc; }

@media only screen and (max-width: 1079px)
{
  .legal-text { padding-top: 90px; }
}

@media only screen and (max-width: 700px)
{
  .legal-text__heading { flex-basis: 100%; margin-bottom: 20px; }
  .legal-text__updated-date { /*flex-basis: 100%;*/ }
}





/* -------------------------------------------------------------------------- */
/* bzam report
/* -------------------------------------------------------------------------- */

.bzam-report { padding: 110px var(--page-content-horizontal-padding-about-and-legal-pages) 86px; position: relative; }

.bzam-report__inner { position: relative; max-width: 900px; margin: auto; z-index: 3; }

.bzam-report__adults-only { position: absolute; top: -118px; right: -66px; max-width: 444px; z-index: 1; }

.bzam-report__heading-and-subheading { margin-top: 30px; margin-bottom: 20px; text-align: center; z-index: 2; position: relative; /* needed for z-index to work */ }
.bzam-report__heading { font-family: var(--futura); color: var(--light-color); font-size: var(--heading-font-size); margin-bottom: 20px; }
.bzam-report__heading--mobile { display: none; }
.bzam-report__subheading { font-family: var(--extended-bold) /*bulk-font-edit-5.45*/; font-size: 16px; color: var(--light-color); line-height: 1.3; margin-bottom: 20px; }

.bzam-report__exclusively-for-adult { max-width: 100%; }

.bzam-report__thanks-for-joining { display: none; /* JS shows this when ready */ font-family: var(--extended-bold) /*bulk-font-edit-5.45*/; font-size: 18px; max-width: 500px; margin: 80px auto 0; line-height: 1.3em; color: var(--yellow); text-align: center; z-index: 2; position: relative; }

.bzam-report__form { padding-bottom: 15px; z-index: 3; position: relative; /* needed for z-index to work */ }
.bzam-report__form-inner { position: relative; display: flex; flex-flow: row wrap; justify-content: space-between; margin-bottom: 20px; gap: 16px; }


.bzam-report__input { flex: 0 0 calc(50% - 8px); max-width: calc(50% - 8px); margin: 0; padding: 0 24px; border: none; border-radius: 0; /* prevents iOS from adding this radius automatically */ font-size: 15px; height: 47px; outline: none !important; background: url(/img/bg-light.jpg?v=1) top center repeat; color: var(--dark-text-color); position: relative; font-family: var(--extended-bold) /*bulk-font-edit-5.45*/; font-weight: bold; }
.bzam-report__input::placeholder { color: var(--dark-text-color); }
.bzam-report__input--email { flex: 0 1 calc(100% - 216px); max-width: calc(100% - 216px); }
.bzam-report__province-container { flex: 0 0 200px; max-width: 200px; height: 47px; outline: none !important; color: var(--dark-text-color); position: relative; display: flex; flex-flow: row wrap; align-items: center;  font-family: var(--extended-bold) /*bulk-font-edit-5.45*/; font-weight: bold; }
.bzam-report__province-container {  }
.bzam-report__province-selected { max-width: 80%; }
/*.bzam-report__province-container[data-bzam-report] { }*/

.bzam-report__disclainers-and-submit { display: flex; flex-flow: row wrap; gap: 20px 36px; align-items: flex-end; }
.bzam-report__disclainers { flex: 0 0 100%; }
.bzam-report__submit { flex: 0 0 100%; }


.bzam-report__province-dropdown-toggle { display: flex; flex-flow: row nowrap; flex: 0 0 100%; justify-content: space-between; margin: 0 0 10px 0; padding: 0 24px; border: none; font-size: 15px; height: 47px; outline: none !important; position: relative; background: url(/img/bg-light.jpg?v=1) top center repeat; display: flex; flex-flow: row wrap; align-items: center; }
.bzam-report__province-dropdown-toggle[data-bzam-report-province-dropdown-toggle="on"] { }
.bzam-report__province-dropdown-arrow { width: 24px; }

.bzam-report__province-dropdown { display: none; position: absolute; width: 100%; margin-top: 47px; margin-bottom: 20px; top: -1px; left: 0; background: url(/img/bg-light.jpg?v=1) top center repeat; padding-bottom: 20px; z-index: 3; font-weight: bold; }
.bzam-report__province-link { display: block; padding: 6px 24px; font-size: 15px; }
.bzam-report__province-link:hover { background-color: var(--orange); }
[data-bzam-report-province-selected="true"] { display: none; /* hide the selected province */ }



.bzam-report__submit-link { display: flex; flex-flow: row nowrap; align-items: center; justify-content: center; gap: 16px; widths: 60px; heights: auto; padding: 16px 0; }
.bzam-report__submit-link[data-bzam-report-submit-link="disabled"] { opacity: .5; } 
/*.bzam-report__submit-link[data-bzam-report-submit-link="enabled"] { background: var(--orange); color: var(--yellow); }
.bzam-report__submit-link[data-bzam-report-submit-link="enabled"]:hover .bounce-right-when-hovered-if-enabled,
.bzam-report__submit-link[data-bzam-report-submit-link="enabled"]:active .bounce-right-when-hovered-if-enabled {
  -webkit-animation : bounce_right .15s ease-in-out 0s 2 alternate;
  -moz-animation    : bounce_right .15s ease-in-out 0s 2 alternate;
  -ms-animation     : bounce_right .15s ease-in-out 0s 2 alternate;
  -o-animation      : bounce_right .15s ease-in-out 0s 2 alternate;
  animation         : bounce_right .15s ease-in-out 0s 2 alternate;
}*/

.bzam-report__submit-text { displays: none; }
.bzam-report__submit-arrow { width: 80px; }

.bzam-report__form-disclaimer-label { display: flex; margin-top: 12px; margin-bottom: 15px; position: relative; padding-left: 45px; cursor: pointer; font-size: 20px; }
.bzam-report__form-disclaimer-label--last { margin-bottom: 0; }
.bzam-report__form-disclaimer-checkbox { flex-basis: 0px; width: 0; margin: 0; visibility: hidden; /* hide the default checkbox */ /*flex: 0 0 20px; margin: 0 16px 0 0; width: 20px; height: 20px; background-color: var(--yellow);*/ }
.bzam-report__form-disclaimer-checkbox-pretty { flex: 0 0 20px; margin: 0 14px 0 0; background-color: #eeebe4; position: absolute; top: 0; left: 0; height: 25px; width: 25px; }
.bzam-report__form-disclaimer-text { flex: 1; font-family: var(--extended-bold) /*bulk-font-edit-5.45*/; font-size: 13px; color: var(--light-color); line-height: 1.1; }



/* custom checkbox styling on hover/click/checked etc ... */
  
/* specify the background color to be shown when hovering over checkbox */
.bzam-report__form-disclaimer-label:hover input ~ .bzam-report__form-disclaimer-checkbox-pretty { background-color: var(--yellow); }
  
/* specify the background color to be shown when checkbox is active */
.bzam-report__form-disclaimer-label input:active ~ .bzam-report__form-disclaimer-checkbox-pretty { background-color: var(--orange); }
  
/* specify the background color to be shown when checkbox is checked */
.bzam-report__form-disclaimer-label input:checked ~ .bzam-report__form-disclaimer-checkbox-pretty { background-color: var(--orange); }
  
/* checkmark to be shown in checkbox; not be shown when not checked */
.bzam-report__form-disclaimer-checkbox-pretty:after { content: ""; position: absolute; display: none; }
  
/* display checkmark when checked */
.bzam-report__form-disclaimer-label input:checked ~ .bzam-report__form-disclaimer-checkbox-pretty:after { display: block; }
  
/* checkmark styling; rotated the rectangle by 45 degreed and showing only two borders to make it look like a tickmark */
.bzam-report__form-disclaimer-label .bzam-report__form-disclaimer-checkbox-pretty:after { left: 8px; bottom: 6px; width: 8px; height: 14px; border: solid var(--light-color); border-width: 0 4px 4px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }


@media only screen and (max-width: 930px)
{
  .bzam-report__adults-only { max-width: 54vw; }
}

@media only screen and (min-width: 768px)
{
  .bzam-report__exclusively-for-adult--mobile-only { display: none; }
}


@media only screen and (max-width: 767px)
{
  .bzam-report__exclusively-for-adult--desktop-only { display: none; }

  .bzam-report__form-inner { gaps: 12px; }

  .bzam-report__input { flex-basis: calc(50% - 8px); max-width: calc(50% - 8px); }
  .bzam-report__province-container { flex-basis: calc(50% - 8px); max-width: calc(50% - 8px); }


  .bzam-report__disclainers-and-submit { justify-content: center; }
  .bzam-report__disclainers { flex-basis: 100%; }
  .bzam-report__submit { flex-basiss: 50%; }

}

@media only screen and (min-width: 768px)
{
  /* layered BGs  */
  .bzam-report:before {
    content: "";
    position: absolute;
    bottom: -11.5%;
    left: 0;
    width: min(24vw, 300px);
    height: 104%;
    /*border: solid 1px red;*/
    background: url(/img/bg-layer/bg-layer-rectangle-vertical-splotchy-yellow-space-on-left.svg) no-repeat left bottom / contain;
    z-index: 2;
    /* filter: opacity(.5); */
  }
  .bzam-report:after {
    content: "";
    position: absolute;
    bottom: -3%;
    right: 0%;
    width: 568px;
    height: 100%;
    /*border: solid 1px red;*/
    background: url(/img/bg-layer/bg-layer-rectangle-vertical-tilted-dots-orange.svg) no-repeat right bottom / contain;
    z-index: 2;
     /*filter: opacity(.5); */
  }

}

@media only screen and (max-width: 1400px) and (min-width: 768px)
{
  /* layered BGs  */
  .bzam-report:before {
    left: -5%;
  }
}
@media only screen and (max-width: 1300px) and (min-width: 768px)
{
  /* layered BGs  */
  .bzam-report:before {
    left: -8%;
  }
}
@media only screen and (max-width: 1200px) and (min-width: 768px)
{
  /* layered BGs  */
  .bzam-report:before {
    left: -8%;
    width: 18vw;
    background-position: right center;
  }
}

@media only screen and (max-width: 600px)
{
  .bzam-report { padding-top: 100px; }
  .bzam-report__inner { max-width: 360px; }

  .bzam-report__heading--desktop { display: none; }
  .bzam-report__heading--mobile { display: inline; max-width: 400px; }

  .bzam-report__subheading { max-widths: 400px; margin-left: auto; margin-right: auto; }

  .bzam-report__input { flex-basis: 100%; max-width: 100%; }
  .bzam-report__province-container { flex-basis: 100%; max-width: 100%; }



}

@media only screen and (max-width: 340px)
{
  .bzam-report__submit { flex-basis: 100%; }
  .bzam-report__submit-link { font-size: 22px; padding-left: 16px; padding-right: 16px; }
  .bzam-report__submit-arrow { width: 70px; }
}





/* -------------------------------------------------------------------------- */
/* animations
/* -------------------------------------------------------------------------- */

a:hover .bounce-right-when-hovered,
a:active .bounce-right-when-hovered {
  -webkit-animation : bounce_right .15s ease-in-out 0s 2 alternate;
  -moz-animation    : bounce_right .15s ease-in-out 0s 2 alternate;
  -ms-animation     : bounce_right .15s ease-in-out 0s 2 alternate;
  -o-animation      : bounce_right .15s ease-in-out 0s 2 alternate;
  animation         : bounce_right .15s ease-in-out 0s 2 alternate;
}

@-webkit-keyframes bounce_right /* Safari and Chrome */ {
  from {
    -webkit-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
  }
  to {
    -webkit-transform: translateX(4px);
    -o-transform: translateX(4px);
    transform: translateX(4px);
  }
}
@keyframes bounce_right {
  from {
    -ms-transform: translateX(0);
    -moz-transform: translateX(0);
    -webkit-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
  }
  to {
    -ms-transform: translateX(4px);
    -moz-transform: translateX(4px);
    -webkit-transform: translateX(4px);
    -o-transform: translateX(4px);
    transform: translateX(4px);
  }
}




@-webkit-keyframes rotating /* Safari and Chrome */ {
  from {
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
  to {
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}
@keyframes rotating {
  from {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
  to {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}



/*@media only screen and (-webkit-min-device-pixel-ratio: 3)
{
  body { display: none !important; }
}*/