/* -------------------------------------------------------------------------- */
/* 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; overflow-y: scroll; }

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


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

ol li { list-style-type: number; }


a {  text-decoration: none; }
.main-content a { color: var(--main-font-color); text-decoration: none; }


[data-section="privacy-policy"] p { font: var(--body-font); margin-bottom: 1.2em; }
[data-section="terms-and-conditions"] p { font: var(--body-font); margin-bottom: 1.2em; }


/* -------------------------------------------------------------------------- */
/* vars
/* -------------------------------------------------------------------------- */

:root {

  --max-page-width: 1440px;

  --page-border-width: 60px;

  /* colors / colours */
  --main-bg-color: #f5f3e2;
  --light-color  : #f5f3e2;
  --orange       : #ff5b35;

  /* fonts */

  

/*  italic small-caps bold 12px/30px Georgia, serif;*/

  --body-font-size: 17px;
  --body-font-line-height: 1.5em;

  --body-font: var(--body-font-size)/var(--body-font-line-height) "TypewriterSpool-SFT-Semi-Bold", serif;

/*  --main-font-color: var(--light-color);*/
/*  --opposite-of-main-font-color: #000000;*/
  
  --main-font-color: #000000;
  --opposite-of-main-font-color: var(--light-color);

}



@media only screen and (max-width: 1000px)
{
  :root{
    --page-border-width: 40px;
  }
}

/*
@media only screen and (max-width: 860px)
{
  :root{
    --page-border-width: 60px;
  }
}

@media only screen and (max-width: 767px)
{
  :root{
    --page-border-width: 80px;
  }
}*/

@media only screen and (max-width: 413px)
{
  :root{
    --page-border-width: 30px
  }
}


/* -------------------------------------------------------------------------- */
/* body rules (keep this under the :root)
/* -------------------------------------------------------------------------- */

body { background-color: var(--footer-bg-color); font-family: "TypewriterSpool-SFT-Semi-Bold"; }



/* -------------------------------------------------------------------------- */
/* flex nearly everything
/* -------------------------------------------------------------------------- */

.page-container,
.header,
.header__inner,
.footer,
.vertical-buttons-and-content,
.vertical-button-container,
.main-content,
.section-container,
.logo-container,
.logo,
.logo__link,
.logo__panel { display: flex; flex-flow: row wrap; }




/* -------------------------------------------------------------------------- */
/* all other rules
/* -------------------------------------------------------------------------- */



.page-container { justify-content: center; background-color: #ffffff; /*background: url('/img/bg-dark.jpg?v=1') top left/50% repeat;*/ position: relative; }





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

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

.break-word { word-break: break-word; }

.paragraph-divider { border-top: 1px solid var(--main-font-color); height: 0px; margin: 1em 0; }

.heading-link-orange-on-hover:hover { color: var(--orange); }

.uppercase { text-transform: uppercase; }

.heading-button { display: inline-block; border: 1px solid var(--main-font-color); padding: 10px 20px; font-family: "OPTIChampionBold"; font-weight: bold; margin-right: 20px; margin-bottom: 20px; }
.heading-button:hover { background: var(--main-font-color); color: var(--opposite-of-main-font-color); }
.heading-button--active { background: var(--main-font-color); color: var(--opposite-of-main-font-color); }

sup { vertical-align: super; font-size: 50%; }




/* -------------------------------------------------------------------------- */
/* header
/* -------------------------------------------------------------------------- */

.header { flex: 0 0 100%; align-items: center; /*justify-content: center;*/ background-color: #f5f3e2; }

.header__inner { flex: 0 0 100%; max-width: var(--max-page-width); margin-left: auto; margin-right: auto; padding: 20px var(--page-border-width); }

.header__left { flex: 0 1 280px; display: flex; align-items: center; }
.header__middle { flex: 1; text-align: center; line-height: 36px; font-family: "OPTIChampionBold", sans-serif; font-size: 30px; }
.header__right { flex: 0 1 280px; text-align: right; font-family: "CourierNew"; position: relative; display: flex; justify-content: flex-end; align-items: center; }

.header__medical-cannabis-by-bzam-link { color: var(--main-font-color); }

.header__by { font-size: 24px; }

.header__logo-image { width: 120px; }


@media only screen and (max-width: 899px) and (min-width: 768px)
{
  .header__middle { font-size: 3.3vw; }
  .header__by { font-size: 2.6vw; }
}

@media only screen and (min-width: 768px)
{
   .header__logo-image { transform: translateX(3%);  /* needed because the "TM" part takes up 6% of the width of the image, so this sets it to horizontally-centered visually */ }
}

@media only screen and (max-width: 767px)
{
  .header { padding: 0 20px; justify-content: flex-end; }
  .header__left { display: none; }
}

@media only screen and (max-width: 1149px)
{
  .header__left { flex-basis: 190px; }
  .header__right { flex-basis: 190px; }
}

@media only screen and (max-width: 767px)
{
  .header__right { flex-basis: auto; }
}





@media only screen and (max-width: 1149px)
{
}
@media only screen and (max-width: 767px)
{
  .main-logo { /* top: -14px; left: -2px; width: 190px; */ top: 13px; left: 20px; width: 150px; z-index: 3; }
}
@media only screen and (max-width: 400px)
{
  /*.main-logo { top: 20px; left: 20px; widths: 110px; z-index: 3; }*/
}






/* -------------------------------------------------------------------------- */
/* nav buttons (in header, left, right, and footer)
/* -------------------------------------------------------------------------- */

.nav-button { flex: 0 0 auto; color: #1e1e1e; text-decoration: none; line-height: 2em; /* this line-height gives us slightly better vertical centering */ display: inline-block; borders:solid 1px red; }
.nav-button--heading-only { border-bottom: 4px solid var(--main-font-color); min-width: 175px; }
.nav-button--menu { display: none; } /* mobile-only */

.nav-button__plus { font-family: "Open Sans"; font-size: 23px; transition: all 0.3s ease; /* so we fade to orange color instaed of snapping to it */ }

.nav-button__text { display: inline-block; /* needed to push the top text up during the animation */ font-family: "TypewriterSpool-SFT-Extended-Extra-Bold"; font-size: 15px; font-weight: bold; transition: all 0.3s ease; /* so we fade to orange color instaed of snapping to it, and so the text-flipping animation works */ }



/* nav button hover flip effect */

.nav-button,
.nav-button__text-container,
.nav-button__text {
/*font-size: 14px !important;*/
/*line-height: 40px !important;*/
}

.nav-button__text-container {
  /*margin-left: 0 !important;
  margin-right: 0 !important;
  margin-top: 0;*/
  line-height: 20px;
  height: 20px;
  display: inline-block;
  overflow: hidden;
  position: relative;
  /*line-height: 1.2em;*/
  /*height: 1.2em;*/
  /*z-index: 1;*/
  margin-top: 7px;
  vertical-align: top;
}

/* rollover textscroll effects */
.nav-button:not(.nav-button--heading-only):hover .nav-button__text {
  transform: translateY(-100%);
}
.nav-button:not(.nav-button--heading-only):hover .nav-button__text--bottom {
  visibility: visible;
}


.nav-button--bzam-ltd:hover .nav-button__text {
  color: var(--orange);
}

.nav-button__text--bottom {
  position: absolute;
  top: calc(100%/* + 2px*/); /* adding 2px here is another way to fix that artifacts problem, but for now I prefer the hidden method below; if you add 2px here you also have to change the translateY a few lines above for the hover-position to be correct */
  left: 0;
  visibility: hidden; /* so we don't see artifacts of this one below when it's supposed to be hidden like https://i.imgur.com/xZ5j0YF.gif */
}

.nav-button__text--where-to-buy-dropdown { font-family: "OPTIChampionBold", sans-serif; }


/*.nav-button__prescription { display: inline; }*/

/* hamburger button that only shows on mobile */
.hamburger { /*position: fixed; top: 20px; right: 40px; font-size: 100px; z-index: 9999; display: block;*/ }
.hamburger__line { border-bottom: 4px solid #1e1e1e; width: 46px; margin-bottom: 11px; }
.hamburger__line--last { margin-bottom: 0; }


.nav-button--where-to-buy-shorter { display: none; }

@media only screen and (max-width: 1239px)
{
  /* fr site only at this width */
  /*[data-current-language="fr"] .nav-button__plus { font-size: 20px; }
  [data-current-language="fr"] .nav-button__text { font-size: 22px; }*/
}
@media only screen and (max-width: 1149px)
{
  .nav-button--where-to-buy { display: none; }
  .nav-button--where-to-buy-shorter { display: inline-block; }
}
@media only screen and (max-width: 1100px)
{
  /*.nav-button__plus { font-size: 20px; }
  .nav-button__text { font-size: 24px; }*/
  
  /* fr site shrinks more than en */
  /*[data-current-language="fr"] .nav-button__plus { font-size: 20px; }
  [data-current-language="fr"] .nav-button__text { font-size: 18px; }*/
}
@media only screen and (max-width: 860px)
{
  /*.nav-button__plus { font-size: 20px; }
  .nav-button__text { font-size: 22px; }*/

  /* fr site shrinks more than en */
  /*[data-current-language="fr"] .nav-button__plus { font-size: 18px; }
  [data-current-language="fr"] .nav-button__text { font-size: 16px; }*/
}
@media only screen and (max-width: 860px)
{
  .nav-button__text--fr { font-size: 13px; }
}
@media only screen and (max-width: 767px)
{

  .header__inner { padding-left: 10px; padding-right: 10px; gap: 30px; }
  .header__middle { text-align: left; font-size: 28px; }
  .header__by { font-size: 22px; }
  .header__logo-image { width: 116px; }

  .nav-button--menu { display: unset; }

  .nav-button__plus--menu { font-size: 28px; }
  .nav-button__text--menu { font-size: 22px; }
  

  .nav-button__text-container--mobile { line-height: 30px; height: 30px; }
  .nav-button__plus--mobile { font-size: 28px; display: inline-block; margin-top: 3px; /* so the "+" vertical-aligns better with text */ }
  .nav-button__text--mobile { font-family: "OPTIChampionBold"; font-size: 25px; letter-spacing: 3px; }
  .nav-button__text--smaller { font-size: 14px; letter-spacing: 1px; }

  .nav-button--where-to-buy,
  .nav-button--where-to-buy-shorter { display: none; }

  [data-where-to-buy-submenu-mobile="hidden"] {display: none; }

}
@media only screen and (max-width: 479px)
{
  .header__middle { text-align: left; font-size: 22px; line-height: 28px; }
  .header__by { font-size: 19px; }
  .header__logo-image { width: 90px; }
}

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

  /* disable text-scroll hover-effect on prescription submenu items */
  /* not BEM-ified (to save a bit of time) */
  .mobile-menu__submenu--where-to-buy .mobile-menu__item { margin-bottom: 6px; }
  .mobile-menu__submenu--where-to-buy .mobile-menu__item:first-child { margin-top: 6px; }
  .mobile-menu__submenu--where-to-buy .mobile-menu__item:last-child { margin-bottom: 0; }
  .mobile-menu__submenu--where-to-buy .nav-button__text-container--mobile { line-height: 22px; height: auto; display: inline-block;  }
  .mobile-menu__submenu--where-to-buy .nav-button__text { display: inline; }
  .mobile-menu__submenu--where-to-buy .nav-button:hover .nav-button__text { transform: none; }
  .mobile-menu__submenu--where-to-buy .nav-button__text--bottom { display: none; }

}

@media only screen and (max-width: 413px)
{
  .nav-button__text--mobile-fr { font-size: clamp(16px, 4.4vw, 19px); letter-spacing: 3px; }
  .nav-button__text--smaller-fr { font-size: clamp(12px, 2.8vw, 14px); letter-spacing: 1px; }
}
@media only screen and (max-width: 369px)
{
  .nav-button__text--mobile:not(.nav-button__text--smaller) { font-size: max(6.6vw, 21px); }
  
  .nav-button__text--mobile-fr { font-size: clamp(12px, 3.9vw, 16px); letter-spacing: 3px; }
  .nav-button__text--smaller-fr { font-size: clamp(9px, 2.7vw, 12px); letter-spacing: 1px; }
}



/* -------------------------------------------------------------------------- */
/* middle "row" with vertical button, content, vertical button
/* -------------------------------------------------------------------------- */

.vertical-buttons-and-content { borders:solid 1px red; align-items: stretch; flex: 0 0 100%; }



/* -------------------------------------------------------------------------- */
/* the two vertical buttons to the left/right of content
/* -------------------------------------------------------------------------- */

.vertical-button-container { flex: 0 0 var(--page-border-width); align-items: center; justify-content: center; /*transform: rotate(-90deg);*/ /*background: url('/img/bg-dark.jpg?v=1') top left/700px repeat;*/ background-color:  var(--main-bg-color); overflow: hidden; /* necessary because browser still "sees" this as not-rotated so it'll make this div too wide if the word is lon like CAREERS because browser essentially thinks the text is still left-to-right */ z-index: 2; }
@media only screen and (max-width: 767px)
{
  .vertical-button-container { flex: 0 0 20px; }
}



.header, .footer { /*background: url('/img/bg-dark.jpg?v=1') top left/50% repeat;*/ z-index: 2; }


/* -------------------------------------------------------------------------- */
/* main content holder (everything between the two vertical buttons)
/* -------------------------------------------------------------------------- */

.main-content { flex: 1; /*width: 100%;*/ /*height: calc(100vh - 100px);*/ /* this might get overriden by JS (in a good way) to deal with mobile device's URL bars etc that mess CSS's height measurements up */ position: relative; /*background-color: grey; background: url(https://images.pexels.com/photos/7667901/pexels-photo-7667901.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260) top left/cover;*/ /*overflow: hidden;*/ /* necessary because sometimes the video is taller than the page itself and so scrollbars will show up if you don't set overflow to hidden */ }






/* -------------------------------------------------------------------------- */
/* prescription dropdown
/* -------------------------------------------------------------------------- */

[data-where-to-buy-dropdown="hidden"] { opacity: 0; pointer-events: none; }
[data-where-to-buy-dropdown="visible"] { opacity: 1; }

[data-mobile-nav-dropdown][data-visible='hidden'] { display: none; }

.where-to-buy-dropdown__button:hover { background-color: var(--orange); /*color: white;*/ /*color: var(--orange);*/ }

[data-where-to-buy-nav-button][data-active="true"] .nav-button__text { color: var(--orange); }

/* these are the DESKTOP rules */
@media only screen and (min-width: 768px)
{
  .where-to-buy-dropdown { border-top: 4px solid var(--main-font-color); position: absolute; top: 62px; right: var(--page-border-width); left: 0; right: 0; width: 100%; height: auto; padding: 0; background-color: var(--main-bg-color); z-index: 2; transition: all .1s ease-in; }
  
  
  /*.mobile-menu__submenu--where-to-buy { display: none; }*/
  /*[data-where-to-buy-submenu-mobile="hidden"] { display: none; }*/
  /*[data-mobile-nav-dropdown="prescription"] { displays: none; }*/
  

  .where-to-buy-dropdown__button { display: block; font-family: "OPTIChampionBold", sans-serif; margin: 0; padding: 0; border-bottom: 1px solid var(--main-font-color); color: var(--main-font-color); }

  .where-to-buy-dropdown__button-text-container { position: relative; }
  
  .where-to-buy-dropdown__button-text-container::after { content: ">"; position: absolute; right: 10px; top: 0; bottom: 0; display: flex; align-items: center; font-family: "Open Sans"; font-size: 20px; }
  
  .where-to-buy-dropdown__button-text { padding: 10px 40px 10px 30px; line-height: 1.4em; }



}

/* mobile */
@media only screen and (max-width: 767px)
{
  .where-to-buy-dropdown { display: none; }
}




/* -------------------------------------------------------------------------- */
/* container that holds all sections, which has semi-transparent BG so we can read text over the video */
/* -------------------------------------------------------------------------- */

.section-container { flex: 0 0 100%; /*max-height: 100%;*/ /*height: calc(100vh - 120px);*/ align-items: flex-start; justify-content: center; /*background: rgba(0, 0, 0, .2);*/ z-index: 1; transition: all .4s ease !important; /* this transition ensures that the swtich between background-opacity (when changing from homepage to subpage) is slow (fades between instead of snapping) */ /*overflow-x: hidden;*/ /* needed for the pheno section to not cause things to get too wide */ max-width: var(--max-page-width); margin-left: auto; margin-right: auto; }


/* -------------------------------------------------------------------------- */
/* any togglable "section", aka the homepage or any subpage section
/* -------------------------------------------------------------------------- */

.section { z-index: 2; /*max-height: calc(100% - 180px);*/ /*transform: translateY(8%);*/ borders:solid 1px red; /*overflow-x: hidden;*/ /* todo remove this overflow-x hidden hack that you added jul-29-2022 and shrink fonts instead so we never get horizontal scrollbars at 320px wide */ }
.section--homepage { align-self: center; /* this one still center-aligns vertically thanks to this rule, but all subapges are now top-aligned */ borders: solid 1px red; flex: 0 0 100%; /* homepage can be a bit wider and still appear to be as wide as subpage content because the panels have their own internal padding */ max-height: calc(100% - 20px); /* homepage can be a bit taller too because we'll never need room for the "x" button */ padding: 0 40px; overflow-y: visible; height: 100%; display: flex; justify-content: center; align-items: center; /* so the logo panels can stretch vertically and fill up the entire space */ }
.section--subpage { flex: 0 0 100%; /*overflow-y: auto;*/ padding: 0 var(--page-border-width) 0; margin-top: 50px; }
.section--subpage p strong { font-family: "TypewriterSpool-SFT-Extra-Bold"; }
.section--newsletter-form { height: 100%; }

.section__heading { color: var(--main-font-color); line-height: 1.2em; margin-bottom: 1em; font-size: 23px; font-weight: bold; font-family: "OPTIChampionBold"; text-transform: uppercase; }
.section__heading--h1 { font-size: 30px; text-decoration: underline; margin-bottom: 40px; }
.section__heading--underlined { text-decoration: underline; }
.section__heading--governance { font-size: 23px; margin-bottom: .2em; text-transform: none; }
.section__heading--dont-transform { text-transform: none; }
.section__heading--press-releases { margin-bottom: 0.6em; }
.section__heading--press-release-article { margin-top: 56px; }


[data-heading-has-sup] { margin-top: -5px; } /* this strangeness is needed because otherwise headings with <sup> inside will be lower on the page compared to non-sup-having headings (but ONLY if the word with the <sup> is on the "top line"), because of the sup's vertical-align rule */
[data-heading-has-sup="sup-on-second-line"] { margin-top: 0; } /* this strangeness is needed because if the word with the <sup> ends up on the 2nd/3rd/etc line, then the top-margin-hack will now misalign it compared to other headings */
.section__heading--extra-top-margin { margin-top: 56px; }
.section__heading--news { text-transform: unset; font-size: 28px; margin-bottom: 21px; }
.section__heading--news-first { margin-top: 0; text-transform: unset; }
.section__heading--our-grow { margin-top: 94px; }
.section__heading--pheno-hunting-timeline { margin-bottom: 0; }

.section__heading-sup { vertical-align: super; font-size: 50%; }

.section__fr-financial-information-disclaimer { margin-bottom: 2.4em; margin-top: 54px; }
.section__fr-financial-information-disclaimer--extra-top-margin { margin-top: 1.2em; }



@media only screen and (max-width: 1249px)
{
  .section--subpage { margin-top: 50px; }
}

@media only screen and (max-width: 1200px)
{
  .section--homepage { flex-basis: 100%; borders:solid 1px red; }
}


@media only screen and (max-width: 767px)
{
  .section-container { height: 100%; max-height: 100%; }
  .section { margin: 0; padding: 0 20px; max-height: calc(100% - 60px); /* this section can be taller now that there's no "X" button */  flex: 0 0 calc(100% - 20px); /*max-height: calc(100% - 120px);*/ }
  .section--homepage { flex: 0 0 100%; /*padding-left: 30px;*/ /* doesn't have a scrollbar on right, so needs to retain it's left-padding to look centered */ max-height: calc(100% - 20px); }
  .section--subpage { margin-top: 30px; }
}

@media only screen and (max-height: 500px)
{
  /*.section { max-height: calc(100% - 60px); }*/
  .section--subpage { /*margin-top: 30px;*/ }
}

@media only screen and (max-width: 500px)
{
  .section__heading--h1 { font-size: 26px; }
}

@media only screen and (max-width: 400px) and (max-height: 500px)
{
  /*.section { max-height: calc(100% - 100px); }
  .section--subpage { margin-top: 50px; }*/
  
}

@media screen and (max-width: 600px) and (max-height: 600px)
{
  .section--homepage {  max-height: calc(100% - 20px); borders:solid 1px red; }
}

/* min-height thing for this heading only */
.section__heading--share-information { display: none; } /* for now this ALWAYS displays none, but if you get approval to launch this, unhide this */
@media only screen and (max-height: 999px)
{
  .section__heading--share-information { display: none; }
}




/* -------------------------------------------------------------------------- */
/* Disclaimer about not selling medical products "BZAM does not sell products directly to patients"
/* -------------------------------------------------------------------------- */

.main-disclaimer { flex-basis: 100%; background-color: var(--main-bg-color); padding: 12px 30px; margin: 20px 0 30px; max-width: var(--max-page-width); margin-left: auto; margin-right: auto; display: flex; flex-flow: row wrap; gap: 10px 30px; align-content: center; }
.main-disclaimer--mobile { margin-top: 0; display: none; }

.main-disclaimer__image-col { flex: 0 0 72px; display: flex; align-content: center; }
.main-disclaimer__text-col { flex: 1; }

.main-disclaimer__image { width: 100%; }

.main-disclaimer__heading { font-family: "OPTIChampionBold", sans-serif; text-transform: uppercase; font-size: 12px; line-height: 1.5em; margin: 1px 0 6px; }
.main-disclaimer__subheading { font-family: "TypewriterSpool-SFT-Extended-Extra-Bold"; font-size: 14px; line-height: 1.2em; }

@media only screen and (max-width: 899px) and (min-width: 601px)
{
  .main-disclaimer { padding-left: 20px; padding-right: 20px; gap: 10px 20px; }
  .main-disclaimer__image-col { flex-basis: 60px; }
}
@media only screen and (max-width: 699px) and (min-width: 601px)
{
  .main-disclaimer__image-col { flex-basis: 50px; }
}
@media only screen and (max-width: 649px) and (min-width: 601px)
{
  .main-disclaimer__image-col { flex-basis: 40px; }
}
@media only screen and (max-width: 600px)
{
  .main-disclaimer { padding-left: 20px; padding-right: 20px; gap: 10px 20px; }
  
  .main-disclaimer--desktop { display: none; }
  .main-disclaimer--mobile { display: flex; }
  
  .main-disclaimer__image-col { flex-basis: 60px; }
}
@media only screen and (max-width: 499px)
{
  .main-disclaimer__image-col { flex-basis: 50px; }
}
@media only screen and (max-width: 413px)
{
  .main-disclaimer__image-col { flex-basis: 40px; }
}
@media only screen and (max-width: 399px)
{
  .main-disclaimer__image-col { flex: 0 0 100%; }
  .main-disclaimer__text-col { flex: 0 0 100%; }
  
  .main-disclaimer__image { width: 60px; }
}



/* -------------------------------------------------------------------------- */
/* homepage logo-showing section
/* -------------------------------------------------------------------------- */

.logo-container { flex: 0 0 100%; height: 100%; justify-content: center; align-items: center; borders:solid 1px blue; }

.logo { flex: 0 0 100%; justify-content: space-evenly; align-items: space-evenly; borders:solid 1px orange;/* height: 100%;*/ /* so the logo panels can stretch vertically and fill up the entire space */ /*max-height: 40vh;*/ max-width: 2600px; borders:solid 1px red; }


@media only screen and (min-width: 767px) and (max-width: 900px) and (max-height: 500px) 
{
  /*.logo { max-height: 94%; }*/
}

@media only screen and (max-height: 700px)
{
  /*.logo { max-height: 94%; }*/
}



.logo__panel { flex: 0 0 25%; margin: 0%; display: flex; flex-flow: row wrap; align-items: center; justify-content: center; borders:solid 1px red; }
.logo__link { display: flex; align-items: center; justify-content: center; borders:solid 1px red; flex: 1; transition: transform .2s ease; }
.logo__link--dunn-craft { cursor: default; transition: opacity .2s ease; }
.logo__image { width: 100%; /*flex: 0 0 100%;*/ /*width: 100%;*/ /*max-height: 80px;*/ transform: scale(1); transition: transform .2s ease; /* this transition is needed too, so it smoothly shrinks when you hover away */ borders:solid 1px red; displays: none; }
.logo__image--bzam { width: 85%; }
.logo__image--tgod { width: 84%; }
.logo__image--ness { width: 86%; }
.logo__image--wyld { width: 76%; }
.logo__image--dunn { width: 85%; }
.logo__image--fresh { width: 75%; }
.logo__image--table-top { width: 86%; }
.logo__image--highly-dutch { width: 55%; }

/* hover effects */
.logo__link:not(.logo__link--dunn-craft):hover { transform: scale(1.1); transition: transform .2s ease; cursor: pointer; /* needed for Safari, because it'll show the i-beam otherwise even though this is an <a> tag */ }
.logo__link--dunn-craft:hover { opacity: .7; transition: opacity .2s ease; }


.logo__divider { display: block; flex: 0 0 94%; height: 0px; /* height: 1px; background: url('/img/dashed-line.png?v=3') top left repeat-x;*/ } /* only shows when logo-gid is two-rows high */


/*@keyframe logo_image_enlarge {
  from: transform: scale(1.3);
  to: transform: scale(1.4);
}

@keyframe logo_image_enlarge {
  from: transform: scale(1.4);
  to: transform: scale(1.3);
}*/



/*.logo,
.logo__panel { border:solid 1px red; }
.logo__panel:nth-child(1) { background: #999; }
.logo__panel:nth-child(2) { background: #777; }
.logo__panel:nth-child(3) { background: #555; }
.logo__panel:nth-child(4) { background: #333; }
.logo__panel:nth-child(5) { background: #111; }
.logo__panel:nth-child(6) { background: #444000; }
.logo__panel:nth-child(7) { background: #666000; }*/
/*.logo__image { display: none; }*/







/* here's where the removed stuff goes */


/* here's the new experimental stuff */
.logo[data-columns="one-column"] { flex-basis: 80%; height: auto; flex-flow: column nowrap; borders:solid 1px red; }
.logo[data-columns="one-column"] .logo__panel { flex: 1; padding: .9vh 0; margin: .9vh 0; }
.logo[data-columns="one-column"] .logo__link { flex: 0; }
.logo[data-columns="one-column"] .logo__image { max-widths: 360px; }

.logo[data-columns="one-column"] .logo__divider { flex: none; align-self: center; /*margin: .9vh 0;*/ }


@media only screen and (max-width: 767px)
{
  .logo[data-columns="one-column"] .logo__panel { margin: .6vh 0; }
  .logo[data-columns="one-column"] .logo__divider { /*margin: .8vh 0;*/ }
}

/*@media only screen and (max-height: 500px)
{
  .logo[data-columns="one-column"] .logo__panel { padding: 6px 0; }
  .logo[data-columns="one-column"] .logo__divider { margin: 6px 0; }
}*/

/*.logo[data-columns="one-column"] .logo__link { height: 100%; background-repeat: no-repeat; background-position: center center; background-size: contain; }
.logo[data-columns="one-column"] .logo__link--dunn-craft { background-image: url("/img/logo__dunn-craft.svg"); }
.logo[data-columns="one-column"] .logo__link--dunn { background-image: url("/img/logo__dunn.svg"); }
.logo[data-columns="one-column"] .logo__link--bzam {background-image: url("/img/logo__bzam.svg");  }
.logo[data-columns="one-column"] .logo__link--snackbar { background-image: url("/img/logo__snackbar.svg"); }
.logo[data-columns="one-column"] .logo__link--superflower { background-image: url("/img/logo__superflower.svg"); }
.logo[data-columns="one-column"] .logo__link--ness { background-image: url("/img/logo__ness.svg"); }
.logo[data-columns="one-column"] .logo__link--tabletop { background-image: url("/img/logo__tabletop.svg"); }
.logo[data-columns="one-column"] .logo__image { display: none; }*/

.logo[data-columns="two-column"] { flex-basis: 80%; }
.logo[data-columns="two-column"] .logo__panel { flex-basis: 48%; padding: 4% 2.4%; }
/* .logo[data-columns="two-column"] .logo__panel--partner-brand { flex-basis: calc(50% * .7); } */ /* make partner-brands  smaller */
/*.logo[data-columns="two-column"] .logo__panel--house-brand { flex-basis: 48%; padding: 4%; }*/


.logo[data-columns="three-column"] { flex-basis: 80%; }
.logo[data-columns="three-column"] .logo__panel { flex-basis: 33%; padding: 3% 1.8%; }
/* .logo[data-columns="three-column"] .logo__panel--partner-brand { flex-basis: calc(35.7% * .7); } */
/*.logo[data-columns="three-column"] .logo__panel--house-brand { flex-basis: 34%; padding: 3%; }*/

.logo[data-columns="four-column"] { }
.logo[data-columns="four-column"] .logo__panel { flex-basis: 21%; padding: 3.0% 0.5%; }
/* .logo[data-columns="four-column"] .logo__panel--partner-brand { flex-basis: calc(21% * .7); } */ /* make partner-brands  smaller */
.logo[data-columns="four-column"] .logo__image--snackbar { width: 85%; }

/* this is now also a five-column/four-column layout but it's still CALLED eight-column in case we revert; I've gone to 5/4 coloumn here even though it might introduce scrollbars if browser is squat enough because it's unlikely anyone would set their browser to this size and because it allows us to have the partner-brands be smaller without looking off-centered like it would if we had one row of eight columns */
.logo[data-columns="eight-column"] { gap: 0 7%; }
.logo[data-columns="eight-column"] .logo__panel { flex-basis: 14.4%; padding: 2% 0; }
/* .logo[data-columns="eight-column"] .logo__panel--partner-brand { flex-basis: calc(18% * .7); } */ /* make partner-brands  smaller */
/*.logo[data-columns="eight-column"] .logo__panel--house-brand-last { border-right: 1px solid var(--main-bg-color); }*/
/*.logo[data-columns="eight-column"] .logo__divider { display: none; }*/



/* -------------------------------------------------------------------------- */
/* all subpages
/* -------------------------------------------------------------------------- */

/*h2 { color: var(--main-bg-color); line-height: 1.2em; margin-bottom: 1em; font-size: 24px; font-weight: bold; font-family: "OPTIChampionBold"; text-transform: uppercase; }*/
h3 { color: var(--main-font-color); line-height: 1.2em; margin-bottom: 0; font-size: 24px; font-weight: bold; font-family: "CourierNew"; }
/*h4 { font-size: var(--body-font-size); }*/

p.large-text { font-size: 25px; line-height: 1.2em; margin-bottom: 1.2em;  } /* used on "Our Mission" page */

ul { margin-bottom: 1.2em; }
li { color: var(--main-font-color); line-height: 1.2em; margin-bottom: 1.2em; font-size: var(--body-font-size); font-family: "TypewriterSpool-SFT-Semi-Bold"; list-style-type: disc; margin-left: 20px; margin-bottom: 8px; }
strong { font-weight: 900; }

@media only screen and (max-width: 420px)
{
  p.large-text { font-size: 24px; }
}





/* -------------------------------------------------------------------------- */
/* video 
/* -------------------------------------------------------------------------- */
.video { position: absolute; top: 100%; left: 100%; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: 0; transform: translate(-100%, -100%); }






/* -------------------------------------------------------------------------- */
/* Newsletter, which sits inside a footer-col
/* -------------------------------------------------------------------------- */

:root{
  --province-container-width:       calc(50% - 8px);
  --newsletter-input-height:        62px;
  --newsletter-input-height-french: 82px;
}


.newsletter { font-family: "TypewriterSpool-SFT-Bold"; }

.newsletter__heading-wrapper { margin-bottom: 30px; }

.newsletter__heading { font-family: "OPTIChampionBold"; font-size: 40px; text-transform: none; margin-bottom: 20px; color: var(--footer-text-color); text-transform: uppercase; line-height: 1.4em; }
.newsletter__subheading { font-family: "TypewriterSpool-SFT-Bold"; font-size: 19px; color: var(--footer-text-color); line-height: 1.5em; }

@media only screen and (max-width: 959px)
{
  .newsletter__heading-wrapper { max-width: 580px; margin-left: auto; margin-right: auto; }
/*  .newsletter__heading-br { display: none }*/
  .newsletter__subheading-br { display: none }
}

.newsletter__thanks-for-joining { display: none; /* JS shows this when ready */ max-width: 500px; margin: 60px auto 0; color: var(--footer-text-color); text-align: center; /*z-index: 2;*/ position: relative; line-height: var(--body-font-line-height); }

.newsletter__form { padding-bottom: 15px; z-index: 3; position: relative; /* needed for z-index to work */ }
.newsletter__form-inner { position: relative; display: flex; flex-flow: row wrap; justify-content: space-between; margin-bottom: 20px; gap: 16px; font-family: "TypewriterSpool-SFT-Semi-Bold"; }


.newsletter__input { flex: 0 0 calc(50% - 8px); max-width: calc(50% - 8px); /* do NOT remove this max-width, because the flex-basis rule alone is not enough to keep this side-by-side always */ margin: 0; padding: 30px 24px; border: none; border-radius: 0; /* prevents iOS from adding this radius automatically */ font-size: var(--body-font-size); height: var(--newsletter-input-height); outline: none !important; background-color: var(--footer-text-color); color: var(--main-font-color); position: relative; font-family: "TypewriterSpool-SFT-Semi-Bold"; font-weight: bold; }
[data-newsletter-form="fr"] .newsletter__input { height: var(--newsletter-input-height-french); }
.newsletter__input::placeholder { color: var(--dark-text-color); }
.newsletter__input--email { flex: 0 1 calc(50% - 8px); max-width: calc(50% - 8px); }
.newsletter__province-container { flex: 0 0 var(--province-container-width); height: var(--newsletter-input-height); outline: none !important; background: var(--footer-text-color); color: var(--dark-text-color); position: relative; display: flex; flex-flow: row wrap; align-items: center; font-weight: bold; }
[data-newsletter-form="fr"] .newsletter__province-container { height: var(--newsletter-input-height-french); }
.newsletter__province-container {  }
.newsletter__province-selected { max-width: 80%; }
/*.newsletter__province-container[data-newsletter] { }*/

.newsletter__disclainers-and-submit { display: flex; flex-flow: row wrap; gap: 20px 36px; align-items: stretch; }
.newsletter__disclainers { flex: 1; }
.newsletter__submit { flex: 0 0 auto; margin-top: 12px; }


.newsletter__province-dropdown-toggle { color: var(--footer-bg-color); display: flex; flex-flow: row nowrap; flex: 0 0 100%; justify-content: space-between; margin: 0 0 10px 0; border: none; padding: 0 24px; font-size: var(--body-font-size); height: var(--newsletter-input-height); outline: none !important; position: relative; display: flex; flex-flow: row wrap; align-items: center; }
.newsletter__province-dropdown-toggle[data-newsletter-province-dropdown-toggle="on"] { background: var(--opposite-of-main-font-color); }
.newsletter__province-dropdown-arrow { width: 24px; }

.newsletter__province-dropdown { display: none; position: absolute; width: 100%; margin-top: calc(var(--newsletter-input-height) - 0px); margin-bottom: 20px; top: -1px; left: 0; border: none; border-top: none; background-color: var(--opposite-of-main-font-color); padding-top: 0px; padding-bottom: 16px; z-index: 3; font-weight: bold; }
[data-newsletter-form="fr"] .newsletter__province-dropdown { margin-top: calc(var(--newsletter-input-height-french) - 0px); }
.newsletter__province-link { display: block; padding: 8px 24px; color: var(--footer-bg-color); font-size: var(--body-font-size); }
.newsletter__province-link:hover { background-color: var(--orange); }
[data-newsletter-province-selected="true"] { display: none; /* hide the selected province */ }



.newsletter__submit-link { display: flex; flex-flow: row nowrap; align-items: center; justify-content: center; background-color: #FF8A65; color: var(--footer-bg-color); padding: 16px 30px; font-size: var(--body-font-size); }
.newsletter__submit-link[data-newsletter-submit-link="enabled"]:hover { background-color: var(--orange); }
.newsletter__submit-link[data-newsletter-submit-link="disabled"] { opacity: .5; } 
/*.newsletter__submit-link[data-newsletter-submit-link="enabled"] { background: var(--orange); color: var(--yellow); }
.newsletter__submit-link[data-newsletter-submit-link="enabled"]:hover .bounce-right-when-hovered-if-enabled,
.newsletter__submit-link[data-newsletter-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;
}*/

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

.newsletter__form-disclaimer-label { display: flex; margin-top: 12px; margin-bottom: 15px; position: relative; padding-left: 45px; cursor: pointer; font-size: 20px; }
.newsletter__form-disclaimer-label--last { margin-bottom: 0; }
.newsletter__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);*/ }
.newsletter__form-disclaimer-checkbox-pretty { flex: 0 0 20px; margin: 0 14px 0 0; border: none; background-color: var(--footer-text-color); position: absolute; top: 0; left: 0; height: 25px; width: 25px; }
.newsletter__form-disclaimer-text { flex: 1; /*bulk-font-edit-5.45*/; font-size: 13px; color: var(--footer-text-color); line-height: 1.3; }

.newsletter__privacy-policy { color: var(--footer-text-color); }


/* custom checkbox styling on hover/click/checked etc ... */
  
/* specify the background color to be shown when hovering over checkbox */
.newsletter__form-disclaimer-label:hover input ~ .newsletter__form-disclaimer-checkbox-pretty { background-color: var(--orange); }
  
/* specify the background color to be shown when checkbox is active */
.newsletter__form-disclaimer-label input:active ~ .newsletter__form-disclaimer-checkbox-pretty { background-color: var(--orange); }
  
/* specify the background color to be shown when checkbox is checked */
.newsletter__form-disclaimer-label input:checked ~ .newsletter__form-disclaimer-checkbox-pretty { background-color: var(--orange); }
  
/* checkmark to be shown in checkbox; not be shown when not checked */
.newsletter__form-disclaimer-checkbox-pretty:after { content: ""; position: absolute; display: none; }
  
/* display checkmark when checked */
.newsletter__form-disclaimer-label input:checked ~ .newsletter__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 */
.newsletter__form-disclaimer-label .newsletter__form-disclaimer-checkbox-pretty:after { left: 8px; bottom: 6px; width: 8px; height: 14px; border: solid var(--main-font-color); border-width: 0 4px 4px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }


@media only screen and (max-width: 1529px)
{
  :root{
    --province-container-width: calc(50% - 8px);
  }
  .newsletter__input--email { flex-basis: var(--province-container-width); max-width: var(--province-container-width); }
  .newsletter__submit { text-align: center; }
  .newsletter__submit-link { width: 180px; }
}

@media only screen and (max-width: 1399px)
{
  :root{
    --province-container-width: calc(100%);
  }
  .newsletter__input--email { flex-basis: var(--province-container-width); max-width: var(--province-container-width); }
}

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

  .newsletter__disclainers-and-submit { justify-content: center; }
  .newsletter__disclainers { flex-basis: 100%; }
  .newsletter__submit { flex-basis: 100%; display: flex; justify-content: flex-end; }
}

@media only screen and (max-width: 999px)
{
  .newsletter__input { flex-basis: 100%; max-width: 100%; }
}

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


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

  .newsletter__form-inner { gaps: 12px; }

  .newsletter__input { flex-basis: calc(50% - 8px); max-width: calc(50% - 8px); }
  .newsletter__province-container { flex-basis: calc(50% - 8px); max-width: calc(50% - 8px); }

  .newsletter__submit { justify-content: center; }

}

@media only screen and (max-width: 600px)
{
  .newsletter {  }
  .newsletter__inner { max-width: 360px; }

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

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

  .newsletter__input { flex-basis: 100%; max-width: 100%; }
  .newsletter__province-container { flex-basis: 100%; max-width: 100%; }



}

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





/* -------------------------------------------------------------------------- */
/* individual product
/* -------------------------------------------------------------------------- */

:root {
  --product-cols: 2;
  --product-gap: 40px;

  --product-thumbnail-cols: 2;
  --product-thumbnail-gap: 26px;

  --specs-horizontal-padding: 30px;
}


.product { display: flex; flex-flow: row wrap; gap: 10px var(--product-gap); font-family: "TypewriterSpool-SFT-Semi-Bold"; }


/* the cols */
.product__images-col { flex: 0 0 calc( (100% / var(--product-cols)) - (var(--product-gap) * (var(--product-cols) - 1)) / var(--product-cols) ); borders:solid 1px red; }
.product__info-col { flex: 0 0 calc( (100% / var(--product-cols)) - (var(--product-gap) * (var(--product-cols) - 1)) / var(--product-cols) ); borders:solid 1px blue; }


/* contents of left col... */

/* images */

.product__main-image-container {  }
.product__main-image { max-width: 100%; }

.product__thumbnails-container { display: flex; flex-flow: row nowrap; gap: var(--product-thumbnail-gap); }
.product__thumbnail-image-container { flex: 0 0 calc( (100% / var(--product-thumbnail-cols)) - (var(--product-thumbnail-gap) * (var(--product-thumbnail-cols) - 1)) / var(--product-thumbnail-cols) ); borders:solid 1px red; }
.product__thumbnail-image { max-width: 100%; }

[data-product-thumbnail]:not([data-product-thumbnail="active"]) { opacity: .5; }


/* contents of right col... */

.product__back-button {  }
.product__back-button--desktop-only { margin-bottom: 60px; }
.product__back-button--mobile-only {  }
.product__back-button-carrot { font-family: "Open Sans"; }
.product__back-button-link { font-family: "TypewriterSpool-SFT-Extended-Extra-Bold"; }

.product__brand { font-family: "OPTIChampionBold", sans-serif; font-size: 17px; text-transform: uppercase; margin-bottom: 14px; }

.product__category { /*background-color: var(--main-font-color); color: white;*/ font-family: "TypewriterSpool-SFT-Extended-Extra-Bold", sans-serif; font-size: 12px; text-transform: uppercase; margin-bottom: 30px; /*padding: 4px; display: inline-block;*/ }

.product__name { font-family: "TypewriterSpool-SFT-Extended-Extra-Bold"; font-size: 28px; margin-bottom: 30px; line-height: var(--body-font-line-height); }

/* the "specs" section, which is 3-cols wide */
.product__specs { display: flex; flex-flow: row wrap; border-top: 1px solid var(--main-font-color); border-bottom: 1px solid var(--main-font-color); padding: 10px 0; margin-bottom: 2em; }
.product__thc-and-cbd { flex: 0 0 calc(100% / 3); padding: 10px var(--specs-horizontal-padding) 10px 0; borders:solid 1px red; line-height: 1.5em; }
.product__size { flex: 0 0 calc(100% / 3); padding: 10px var(--specs-horizontal-padding); border-left: 1px solid var(--main-font-color); border-right: 1px solid var(--main-font-color); borders:solid 1px red; line-height: 1.5em; }
.product__strain-type { flex: 0 0 calc(100% / 3); padding: 10px 0 10px var(--specs-horizontal-padding); borders:solid 1px red; line-height: 1.5em; }


/* description */
.product__description { font: var(--body-font); margin-bottom: 2em; }

/* available at */
.product__available-at {  }
.product__available-at-heading { margin: 0; font-family: "OPTIChampionBold", sans-serif; font-size: 12px; padding-bottom: 10px;  border-bottom: 4px solid var(--main-font-color); }
.product__available-at-item { display: block; margin: 0; font-family: "OPTIChampionBold", sans-serif; font-size: 17px; padding: 14px 40px 14px 10px; border-bottom: 1px solid var(--main-font-color); position: relative; }
.product__available-at-item::after { content: ">"; position: absolute; right: 10px; top: 0; bottom: 0; display: flex; align-items: center; font-family: "Open Sans"; font-size: 20px; }
.product__available-at sup { vertical-align: super; font-size: 70%; } /* not BEM-ified but maybe do so in future */
.product__available-at-item:hover { background-color: var(--orange); }


@media only screen and (max-width: 1199px)
{
  :root{
    --specs-horizontal-padding: 20px;
  }
}

/* specs section - cols or rows depending on spacing here */
@media only screen and (max-width: 1099px) and (min-width: 768px), (max-width: 659px) and (min-width: 601px), (max-width: 413px)
{
  .product__specs { padding: 0; }
  .product__thc-and-cbd,
  .product__size, 
  .product__strain-type { flex-basis: 100%; padding: 10px 0; border-left: none; border-right: none; border-bottom: 1px solid var(--main-font-color);; }
  .product__strain-type { border-bottom: none; }
}


/* mobile only stuff */

.product__back-button--mobile-only { display: none; }

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

  :root{
    --product-cols: 1;
    --product-gap: 30px;
  }

  .product__back-button--desktop-only { display: none; }
  .product__back-button--mobile-only { display: flex; }


  .product__images-col {  }

  .product__info-col { margin-top: 30px; }
}



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

:root {
  --footer-top-row-cols: 2;
  --footer-top-row-gap: 200px;

  --footer-brands-and-bzam-cols: 2;
  --footer-brands-and-bzam-gap: 50px;

  --footer-text-color: #f5f3e0;
  --footer-bg-color: #1e1e1e;
}

.footer { margin-top: 60px; flex: 0 0 100%;  backgrounds: yellow; align-items: center; font-family: "TypewriterSpool-SFT-Semi-Bold"; background: var(--footer-bg-color); /*justify-content: center;*/ }

.footer__inner { margin: auto; max-width: var(--max-page-width); padding: 60px var(--page-border-width); }

.footer__row { display: flex; flex-flow: row wrap; flex-basis: 100%; display: flex; flex-flow: row wrap; gap: 30px var(--footer-top-row-gap); }
.footer__row--top { gap: 60px var(--footer-top-row-gap); }
.footer__row--bottom { margin-top: 50px; gap: 40px 20px; border-top: 1px solid var(--footer-text-color); padding-top: 20px; }


.footer__col--top-left { flex: 0 0 calc( (100% / var(--footer-top-row-cols)) - (var(--footer-top-row-gap) * (var(--footer-top-row-cols) - 1)) / var(--footer-top-row-cols) ); borders:solid 1px red; }
.footer__col--top-right { flex: 0 0 calc( (100% / var(--footer-top-row-cols)) - (var(--footer-top-row-gap) * (var(--footer-top-row-cols) - 1)) / var(--footer-top-row-cols) ); borders:solid 1px red; display: flex; align-items: flex-start; flex-flow: row wrap; /*text-align: right; align-items: space-between;*/ borders:solid 1px red; gap: 60px var(--footer-brands-and-bzam-gap); align-self: start; /* needed to prevent the contents from stretching vertically */ }

.footer__col--bottom-left { flex: 1; borders:solid 1px red; display: flex; align-items: center; gap: 30px; /*text-align: right; align-items: space-between;*/ borders:solid 1px red; gap: var(--footer-brands-and-bzam-gap); }
.footer__col--bottom-right { flex: 0 0 auto; borders:solid 1px red; display: flex; align-items: flex-start; gap: 30px; /*text-align: right; align-items: space-between;*/ borders:solid 1px red; gap: var(--footer-brands-and-bzam-gap); }


.footer__brands { flex: 0 0 calc( (100% / var(--footer-brands-and-bzam-cols)) - (var(--footer-brands-and-bzam-gap) * (var(--footer-brands-and-bzam-cols) - 1)) / var(--footer-brands-and-bzam-cols) ); display: flex; flex-flow: column nowrap; align-items: flex-start; }
.footer__bzam { flex: 0 0 calc( (100% / var(--footer-brands-and-bzam-cols)) - (var(--footer-brands-and-bzam-gap) * (var(--footer-brands-and-bzam-cols) - 1)) / var(--footer-brands-and-bzam-cols) ); display: flex; flex-flow: column nowrap; align-items: flex-start; }


.footer__heading { color: var(--footer-text-color); font-family: "OPTIChampionBold"; font-size: 16px; padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--footer-text-color); width: 100%; }



.footer__copyright-paragraph { font-familys: "CourierNew"; font-size: 10px; line-height: 1.5em; color: var(--footer-text-color); margin: 0; /*display: flex; align-items: center;*/ }

.footer__regular-link,
.footer__regular-link:active,
.footer__regular-link:visited { color: var(--footer-text-color); text-decoration: none; }



.footer__linked-in-and-bzam-logo { flex: 0 0 auto; display: flex; flex-flow: row wrap; justify-content: flex-start; }
.footer__linked-in { flex: 0 0 auto; padding: 20px 30px 20px 0; border-right: 1px solid var(--footer-text-color); display: flex; flex-flow: row wrap; align-items: center; justify-content: flex-start; }
.footer__linked-in-link { width: 100%; }
.footer__linked-in-image { width: 36px; }


.footer__bzam-logo { flex: 0 0 auto; padding: 20px 0 20px 30px; display: flex; align-items: center; }

.footer__bzam-logo-image { width: 200px; }



/* textroll buttons */

.footer__button-wrapper { /*display: flex; flex-flow: row wrap; flex: 0 0 100%;*/ }

.textroll-button { flex: 0 0 auto; color: #1e1e1e; text-decoration: none; line-height: 2em; /* this line-height gives us slightly better vertical centering */ display: flex; gap: 8px; borders:solid 1px red; color: var(--footer-text-color); }

.textroll-button__plus { font-family: "Open Sans"; font-size: 23px; transition: all 0.3s ease; /* so we fade to orange color instaed of snapping to it */ }

.textroll-button__text { display: inline-block; /* needed to push the top text up during the animation */ font-family: "TypewriterSpool-SFT-Extended-Extra-Bold"; font-size: 17px; letter-spacing: 3px; font-weight: bold; transition: all 0.3s ease; /* so we fade to orange color instaed of snapping to it, and so the text-flipping animation works */ text-transform: uppercase; }




/* nav button hover flip effect */

.textroll-button,
.textroll-button__text-container,
.textroll-button__text {
/*font-size: 14px !important;*/
/*line-height: 40px !important;*/
}

.textroll-button__text-container {
  /*margin-left: 0 !important;
  margin-right: 0 !important;
  margin-top: 0;*/
  line-height: 1.4em;
/*  height: 20px;*/
  displays: inline-block;
  overflow: hidden;
  position: relative;
  /*line-height: 1.2em;*/
  /*height: 1.2em;*/
  /*z-index: 1;*/
  margin-top: 7px;
  vertical-align: top;
}

.textroll-button:hover .textroll-button__text {
  color: var(--orange);
}
.textroll-button:hover .textroll-button__text--bottom {
  visibility: visible;
}


















.footer__language-chooser { color: var(--footer-text-color); }
.footer__language-chooser-link { color: var(--footer-text-color); }
.footer__language-chooser-link,
.footer__language-chooser-link:hover,
.footer__language-chooser-link:visited { text-decoration: none; }



.footer__tgod-br--2 { display: none; }

@media only screen and (max-width: 1449px)
{
  .footer__tgod-br--2 { display: inline; }
}

@media only screen and (max-width: 1239px)
{
  :root {
    --footer-top-row-gap: 8vw;
  }
}

@media only screen and ( (max-width: 1099px) and (min-width: 768px)), (max-width: 539px)
{
  .footer__brands { flex-basis: 100%; }
  .footer__bzam { flex-basis: 100%; }
  .footer__tgod-br { display: none; }
}
@media only screen and (max-width: 960px) and (min-width: 768px)
{

}
@media only screen and (max-width: 979px)
{
  .footer__tgod-br--1 { display: inline; }
}
@media only screen and (max-width: 860px) and (min-width: 768px)
{
  .footer__col--top-right { gap: 20px; }
}

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

@media only screen and (max-width: 767px)
{
  :root {
    --footer-top-row-cols: 1;
  }
  .footer__col--bottom-left { flex-basis: 100%; justify-content: center; text-align: center; }
  .footer__col--bottom-right { flex-basis: 100%; justify-content: center; text-align: center; }

  .footer__row--bottom { padding-top: 34px; }

  .footer__tgod-br--2 { display: none; }
}
@media only screen and (max-width: 659px)
{
  .footer__tgod-br { display: inline; }
}
@media only screen and (max-width: 539px)
{
  .footer__col--top-right { gap: 50px; }

  .footer__tgod-br--2 { display: none; }
}

@media only screen and (max-width: 499px)
{
  .newsletter__heading { font-size: 32px; }
  .footer__linked-in-image { width: 28px; }
  .footer__bzam-logo-image { width: 150px; }
}
@media only screen and (max-width: 413px)
{
  .footer__linked-in-image { width: 28px; }
  .footer__bzam-logo-image { width: 140px; }
}








/* -------------------------------------------------------------------------- */
/* mobile menu modal */
/* -------------------------------------------------------------------------- */

@media only screen and (min-width: 768px)
{
  .mobile-menu { display: none !important; }
}

.mobile-menu { display: none; position: fixed; top: 0%; right: 0; left: 0%; bottom: 0; width: 100%; height: 100%; overflow-y: auto; z-index: 9998; /*background: url(/img/bg-dark.jpg?v=1) top left/700px repeat #1e1e1e;*/ background-color: var(--main-bg-color); font-family: "Futura-ExtBol"; }

/*.mobile-menu.is-active { display: block; }*/

.mobile-menu__inner { position: relative; height: 100%; max-height: 460px; }

.mobile-menu__close { position: absolute; top: 40px; right: 30px; width: 33px; }
.mobile-menu__close-x { width: 100%; }

.mobile-menu__table { display: table; width: 100%; height: 100%; }
.mobile-menu__cell { display: table-cell; vertical-align: middle; padding: 0 0 40px; }

.mobile-menu__list { max-width: 400px; margin: auto; padding: 60px 30px 30px; }
.mobile-menu__item { margin: 0; /* don't put any vertical maring in (use spacers instead - see below) */ text-align: left; list-style-type: none; }
.mobile-menu__link { display: block; background: url(/img/bg-light.jpg?v=1) center top repeat var(--bg-light-color); color: #1e1e1e; font-size: 48px; font-weight: bold; padding: 14px 0; margin: 0 8px; }
.mobile-menu__link--smaller { font-size: 34px; }

.mobile-menu__link:hover { color: var(--orange); }
.mobile-menu__link--available:hover { color: #1e1e1e; cursor: default; } /* this one isn't a link itself despite being an "a" tag, but it holds links; no time to re-code that before launch */

.mobile-menu__link--home { padding: 0; max-height: calc(100vh - 430px); overflow: hidden; /* so all buttons fit on screen (we start cropping the flower image if needed) */  }

/* this last "button" is flexed because it contains a grid (social icons and text) */
.mobile-menu__link--available { padding: 4px 20px; height: 76px; display: flex; flex-flow: row nowrap; align-items: center; justify-content: center; }

.mobile-menu__submenu { margin-left: 26px; }

/* spacer li elements; needed because the STRAINS slideDown is janky if we use margins to space the li's rather than spacers */
.mobile-menu__spacer { height: 20px; list-style-type: none; }
.mobile-menu__spacer--between-submenu-items { height: 4px; margin-bottom: 0;}
.mobile-menu__spacer--linked-in { height: 20px; }

.mobile-menu__linked-in { display: inline-block; width: 36px; }

.mobile-menu__language-chooser { color: #1e1e1e; font-family: "TypewriterSpool-SFT-Semi-Bold"; font-size: 20px; }
.mobile-menu__language-chooser-link { color: #1e1e1e; }

.mobile-menu__copyright-etc { color: #1e1e1e; font-size: 13px; line-height: 2em; }

/* submenu for all strains, hidden at first (JS unhides) */
.mobile-menu__sub-list { display: none; margin-top: 0; }

.mobile-menu__instagram { flex: 0; height: 100%; margin-right: 12px; }
.mobile-menu__facebook { flex: 0; width: 67px; margin-right: 12px; }
.mobile-menu__available-text { flex: 0 1 250px; display: flex; flex-flow: column nowrap; justify-content: center; }

.mobile-menu__available-heading { text-align: left; font-family: "KorolevRoughCompressed-Bold"; font-size: 18px;  }
.mobile-menu__available-paragraph { text-align: left; font-family: "KorolevRoughCompressed-Light"; font-size: 18px;  }

body.user-is-on-mac .mobile-menu__available-heading,
body.user-is-on-mac .mobile-menu__available-paragraph { font-size: 17px; }

.mobile-menu__social-link { color: #00AAE2; }
.mobile-menu__instagram,
.mobile-menu__facebook,
.mobile-menu__social-link:hover { color: var(--orange); cursor: pointer; }

.mobile-menu__image { width: 100%; vertical-align: bottom; }

.mobile-menu__legal-links { color: var(--main-font-color); }

/* max fix for the line-height problem that ruins vertical centering */
body.user-is-on-mac .mobile-menu__link--mac-fix { padding: 18px 0 10px; }


@media only screen and (max-width: 479px)
{
  .mobile-menu__close { top: 31px; }
}





/* -------------------------------------------------------------------------- */
/* overrides - don't show nav buttons until that's activated by JS
/* -------------------------------------------------------------------------- */

/* necessary because when page loads we don't know if we want EN or FR buttons, so hide them all until JS knows what language this is and shows the proper ones */
/*.nav-button:not(.mobile-only):not(.nav-button--mobile) { display: none; }*/



/* -------------------------------------------------------------------------- */
/* states
/* -------------------------------------------------------------------------- */

.is-hiding { /*animation-name: fadein; animation-duration: 1s;*/ }
.is-hidden { display: none; }

.is-showing { animation-name: fadein; animation-duration: 1s; }

[data-mobile-nav-dropdown-item][data-active="true"] { color: var(--orange); }

.is-active .nav-button__text { color: #ff5b35; }

/*@keyframes fadein
{
  from { opacity: 0; }
  to   { opacity: 100%; }
}
@keyframes fadeout
{
  from { opacity: 100%; }
  to   { opacity: 0; }
}*/











/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
/* this is the stuff I'm definitely using on the Medical site; everything above needs to be culled
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */


/* this is sloppy; rename this */

.products-left-right-wrapper { display: flex; flex-flow: row wrap; gap: 20px 60px; }

.products-left { flex: 0 0 180px; borders:solid 1px red; }
.products-right { flex: 1; bordesr:solid 1px blue; }



.products__filtered-results-message,
.products__zero-results-message { flex: 0 0 100%; font-family: "OPTIChampionBold", sans-serif; line-height: 1.4em; }

.products__filtered-results-clearer,
.products__clear-filters { font-family: "TypewriterSpool-SFT-Extended-Extra-Bold"; }

/*.products__filtered-results-clearer:hover { text-decoration: underline; }*/

.products__clear-filters { display: none; } /* hiding this for now */


/* sidebar stuff */

.sidebar__heading { font-family: "OPTIChampionBold", sans-serif; font-size: 16px; padding-bottom: 10px; border-bottom: 4px solid var(--main-font-color); margin-bottom: 14px; } 

.sidebar__filter-button { display: block; padding: 3px 0; }
.sidebar__filter-button:not(.sidebar__filter-button--apply):hover .sidebar__filter-button-inner { background-color: var(--orange); }

.sidebar__filter-button-inner { font: var(--body-font); font-family: "TypewriterSpool-SFT-Extended-Extra-Bold"; font-size: 14px; backgrounds: red; padding: 2px 8px; }




.sidebar__spacer { height: 60px; }






.sidebar__toggle-filters { flex: 0 0 100%; display: block; font-family: "OPTIChampionBold", sans-serif; font-size: 20px; margin: 0; padding: 10px; text-align: center; }
.sidebar__toggle-filters:hover { color: var(--orange); }


/* APPLY (apply filters) button that only shows on mobile */
.sidebar__filter-button--apply {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: center;
    background-color: #FF8A65;
    color: var(--footer-bg-color);
    padding: 16px 30px;
    font-size: var(--body-font-size);
    width: 140px;
    margin: 20px auto 0;

  }
.sidebar__filter-button--apply:hover { background-color: var(--orange); }


/* disable hover-effects for touchscreen-only devices */
@media (hover: none)
{
  /* the filter buttons (like Dried Flower, Oil, BZAM, etc) on desktop-sidebar (even though this is detecting touchscreen, that sidebar is visible if phone sideways or if on tablet) and in the FILTERS mobile slide-down (but NOT in mobile-menu that gets triggerd via hamburger because we do a textscroll effect rather than colour-change on hover in that menu); if on touch-only devices we want these to become off-white as soon as they're tapped (instead of "blank" or "inherited" bg) because they've been instantly-applied as soon as theyre tapped (unlike mouse-devices where you can hover and make BG orange but NOT apply therefore BG soulndn't become off-white); we check for ":active" too in case ":hover" doesn't read properly on the touch-device */
  .sidebar__filter-button:not(.sidebar__filter-button--apply):hover .sidebar__filter-button-inner,
  .sidebar__filter-button:not(.sidebar__filter-button--apply):active .sidebar__filter-button-inner { background-color: var(--main-bg-color); }
  
  /* the "FILTERS" button on mobile that triggers that slidedown */
  .sidebar__toggle-filters:hover { color: inherit; }
  
  /* the "APPLY" button on mobile FILTERS slidedown; do NOT set this to "inherit" here, because that'll cause the BG on this button to disappear when tapped rather than staying as its "non-hver" BG colour, because "inherit" always inherits from parent (and this parent has no BG colour set) rather than inheriting from its pre-hover state; leaving this here though in case we do want a different tap-effect for touchscreen devices than what we're doing for devices with hover-ability (aka with mice) */
  /*.sidebar__filter-button--apply:hover { background-color: inherit; }*/
}

/* highlight active sidebar selections */
[data-active="true"] .sidebar__filter-button-inner { background-color: var(--main-bg-color); font-family: "TypewriterSpool-SFT-Extended-Extra-Bold-Italic"; }


@media only screen and (min-width: 601px)
{
  .sidebar__toggle-filters { display: none; }
  .products__filtered-results-message { displays: none; }

  [data-apply-filters] { display: none; }
}
@media only screen and (max-width: 600px)
{
  .products-left { border: solid 4px var(--main-bg-color); padding: 10px; }
  .products__filters { display: none; /* js will show this if toggled */ }
  .products__filters-inner { padding: 20px; }
  
  .sidebar__heading--category { margin-tops: 20px; }
  .sidebar__spacer { height: 12px; }

  [data-filters="hidden"] { display: none; }
}



/* -------------------------------------------------------------------------- */
/* products
/* -------------------------------------------------------------------------- */

/* we switch from 2cols to 1col a few times to ensure that each product-card is always 180px wide or wider */
:root {
  --products-cols: 4;
  --products-gap: 80px 30px;
}

@media only screen and (max-width: 1219px)
{
  :root {
    --products-cols: 3;
    --products-gap: 30px;
  }
}

@media only screen and (max-width: 959px)
{
  :root {
    --products-cols: 2;
  }
}

@media only screen and (max-width: 709px)
{
  :root {
    --products-cols: 1;
  }
}
@media only screen and (max-width: 600px)
{
  :root {
    --products-cols: 2;
  }
}

@media only screen and (max-width: 469px)
{
  :root {
    --products-cols: 1;
  }
}



.products { display: flex; flex-flow: row wrap; gap: var(--products-gap); }



.product-card { borders: solid 1px #333; flex: 0 0 calc( (100% / var(--products-cols)) - (var(--product-gap) * (var(--products-cols) - 1)) / var(--products-cols) ); position: relative; padding: 0; flex-flow: column nowrap; z-index: 2; justify-content: flex-start; display: flex; align-items: stretch; gap: 20px 0; }


.product-card__image-container { displays: none; borders: solid 1px rgba(0 0 0 / 0%); flex: 0 0 100%; width: 100%; paddings: 20px; position: relative; /*overflow: hidden;*/ z-index: 1; }


.product-card__image { borders:solid 1px red; width: 100%; aspect-ratio: 1; border-bottom: 1px solid var(--main-font-color); }


.product-card__brand { borders:solid 1px red; width: 100%; font-family: "OPTIChampionBold", sans-serif; font-size: 12px; text-transform: uppercase; align-self: flex-start; }

.product-card__category { margin-top: -8px; /*background-color: var(--main-font-color); color: white;*/ font-family: "TypewriterSpool-SFT-Extended-Extra-Bold", sans-serif; font-size: 12px; text-transform: uppercase; align-self: flex-start; /*padding: 4px;*/ }

.product-card__name { borders:solid 1px red; width: 100%; font-family: "TypewriterSpool-SFT-Extended-Extra-Bold", sans-serif; font-size: 22px; align-self: flex-start; }

.product-card__thc-and-cbd { borders:solid 1px red; width: 100%; display: flex; align-self: stretch; align-items: stretch; font: var(--body-font);  margin-top: -5px; /* so that this is visually the same height-0distance from product name as other things in this section */ }

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


.product-card__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(--main-font-color); displays: inline; word-break: break-word; }



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

}

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

}

@media only screen and (min-width: 1250px)
{
  .products__filtered-results-message { margin-bottom: -50px; }
}

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


}

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


}

@media only screen and (min-width: 768px)
{
  .carousel--homepage-flower: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-pre-roll: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 {
    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)
{

  
  .products-left { flex: 0 0 100%; }
  .products-right { flex: 0 0 100%; }
 
}