@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; }

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

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

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

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




/* -------------------------------------------------------------------------- */
/* 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;

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

  --section-divider-height: 50px;

  --yellow      : #f8c715;
  --yellow-light: #fef79e;
  --yellow-dark : #dda823;

  --orange      : #f17205;
  --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) */
  
  /*--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;
  }
}





/* -------------------------------------------------------------------------- */
/* 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 { display: inline-block; border: 1px solid var(--yellow); padding: 12px 28px; font-family: 'Vacation-Heavy'; font-size: 22px; color: var(--yellow); background-color: var(--orange); }

@media (any-hover: hover)
{
  .rectangle-button:hover { background-color: #e83d1d; }
}

.paragraph { font-family: "Bookmania-Regular"; color: var(--yellow); font-size: 18px; line-height: 1.3; margin-bottom: 1.3em; }

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

/* section dividers */

.section-divider { position: relative; height: var(--section-divider-height); background_____: url(/img/section-divider--line-only.svg) repeat-x center left / var(--squiggle-width); overflow: hidden; }

.section-divider--bottom-dark { position: relative; margin-top: calc( var(--section-divider-height) * -1 ); background-image_____: url(/img/section-divider--bottom-dark.svg); background-position_____: bottom -1px left; }
.section-divider--bottom-light { position: relative; margin-top: calc( var(--section-divider-height) * -1 ); background-image_____: url(/img/section-divider--bottom-light.svg); background-position_____: bottom -1px left; }
.section-divider--top-dark { position: relative; margin-top: calc( var(--section-divider-height) * -1 ); background-image_____: url(/img/section-divider--top-dark.svg); background-position_____: top left; z-index: 2; }
.section-divider--top-light { position: relative; margin-top: calc( var(--section-divider-height) * -1 ); background-image_____: url(/img/section-divider--top-light.svg); background-position_____: top left; z-index: 2; }

.section-divider--yellow-below { background-color: var(--yellow-light); }

.section-divider--below-homepage-hero { margin-top: -30px; }

.section-divider--carousel-above { z-index: 1; }


.section-divider__image { width: var(--squiggle-width); position: absolute; left: 0; /* inline CSS overrides the "left" rules to fix the 1px problem with these SVGs */ }
.section-divider__image--top { top: -1px; }
.section-divider__image--bottom { bottom: -1px; }
.section-divider__image--line-only { top: 0; transform: translateY(100%); /* keeps this one vertically centered; might stop working if this image-width/size changes */ }

/*.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: 600px)
{
  .section-divider--homepage-flower-vaporizers-pre-rolls-section { display: none; }
}





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

body {
  background-color: var(--violet);
  /*padding: 0 30px 0px;*/
  /* position: relative;  */
}





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

.nav { position: fixed; width: 100%; /*max-width: 2000px;*/ top: 0; left: 0; right: 0; margin: auto; text-align: center; overflow: hidden; z-index: 11; /*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;*/ }

.nav__content { background: var(--yellow); height: 46px; /*transition: height .5s ease-in-out;*/ }

.nav__top-row { display: flex; flex-flow: row nowrap; align-items: center; justify-content: center; borders:solid 1px red; padding: 0 var(--page-content-horizontal-padding) 0; }
.nav__bottom-row { display: flex; flex-flow: row nowrap; borders:solid 1px red; padding: 4px 30px; align-items: center; justify-content: center; }

/* above top row content */

.nav__close { position: absolute; top: 80px; left: 30px; width: calc(124px * .84); /* this width shuold always match the width of nav__ness-logo, at all browser-widths so that the "x" is always exactly centered under ness logo */ text-align: center; z-index: 10; left: auto; top: 80px; right: var(--page-content-horizontal-padding); opacity: 0; /* js shows this when curtain reveals */ /*pointer-events: none;*/ }
.nav__close-image { width: 36%; }

/* top row content */

.nav__menu-button { flex:  0 0 calc(124px); /*position: fixed; top: 12px;*/ /* make sure this bottom-aligns with the ness logo on right side left: 100px; */  width: 120px; 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 */ }
.nav__menu-button-waves-image { /*flex: 0 0 10%;*/ width: 30%; margin-right: 10%; }
.nav__menu-button-menu-image { /*flex: 0 0 10%;*/  width: 60%; }
body.homepage .nav__menu-button { transform: translateY(-50px); } /* on homepage, MENU is hidden by default (until JS reveals it) */

.nav__special-message { flex: 1; font-family: 'Bookmania-Regular'; font-weight: bold; font-style: italic; font-size: 18px; color: var(--orange); }
body:not(.homepage) .nav__special-message { visibility: hidden; height: 0; } /* we use visibility hidden if you want to hide this (so this still takes up space) */
body.user-is-on-safari .nav__special-message { letter-spacing: -1px; }

.nav__special-message-link { color: var(--violet); text-decoration: underline; }

.nav__ness-logo { flex: 0 0 calc(124px * .84); margin-top: 12px; /*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 .nav__ness-logo { transform: translateY(-50px); } /* on homepage, ness logo is hidden by default (until JS reveals it) */


/* bottom row content */

.nav__bottom-row-inner { max-width: 260px; margin-top: 35px; /* position: absolute;  top: 80px; display: flex; flex-flow: row nowrap; overflow: hidden; border:solid 1px red;*/  }

.nav__panels { /*max-width: 260px; margin-tops: 20px; position: absolute; top: 80px;*/ 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: 20px 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; }


.nav__squiggle { /*background: url(/img/nav__squiggle-bg.svg) repeat-x bottom center / var(--squiggle-width);*/ position: relative; height: 20px; overflow: hidden; /*transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); will-change: top; background-attachment: scroll; */ margin-top: -1px; }
.nav__squiggle-image { width: var(--squiggle-width); position: absolute; bottom: 0; left: -2px; /*transform: translateX(-50%);*/ }
.nav__squiggle-image--2 { left: calc( var(--squiggle-width) - 4px ); }
.nav__squiggle-image--3 { left: calc( var(--squiggle-width) * 2 - 6px ); }
.nav__squiggle-image--4 { left: calc( var(--squiggle-width) * 3 - 8px ); }
.nav__squiggle-image--5 { left: calc( var(--squiggle-width) * 4 - 10px ); }
.nav__squiggle-image--6 { left: calc( var(--squiggle-width) * 5 - 12px ); }


/* the products stuff */

.nav__products { text-align: left; displays: none; transition: all .3s ease-out; }

.nav__back-arrow { position: absolute; width: 60px; height: 45px; left: -70px; opacity: 0; display: flex; flex-basis: 0; /* JS shows this when needed, and this must be display:  ;none at first so it doesn't cover the HOME button, then turned into flex by JS when it shows */ pointer-events: none; background: url(/img/nav__back-arrow.svg) no-repeat center center / contain; align-items: center; justify-content: center; font-size: 9px; font-family: "Jaune-GrandeBlack"; line-height: 1.2; color: var(--yellow); }
.nav__back-arrow--mobile { display: none; opacity: 0; cursor: pointer; }

/* 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: "Bookmania-Regular"; 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)
{
  /* these are tied to JS rules, so don't change this or the max-width above w/o changing JS too */
  .nav__content { height: 40px; }
  .nav__menu-button { flex-basis: calc(112px); }
  .nav__ness-logo { flex-basis: calc(112px * .84); }

  .nav__close { width: calc(112px * .84); top: var(--page-content-horizontal-padding); }
}

@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 */
  .nav__content { height: 36px; }
  .nav__menu-button { flex-basis: calc(105px); }
  .nav__ness-logo { flex-basis: calc(105px * .84); }

  .nav__close { width: calc(105px * .84); top: var(--page-content-horizontal-padding); }
}

@media only screen and (max-width: 1169px)
{
  .nav__special-message-hide-when-narrow { display: none; }
}

@media only screen and (max-width: 767px)
{
  .nav__special-message { visibility: hidden; height: 0; } /* we use visibility hidden so this still takes up space */
}

/* this whole section only needed for Pumpkin Spice video; remove this "max-width: 959" section when we remove that video, and look for all other "Pumpkin Spice" notes in this CSS file (and possibly in JS) and make all those changes too when we remove Pumpkin Spice */
@media only screen and (max-width: 959px)
{
  body.homepage .nav__menu-button { transform: translateY(0px); } 
  body.homepage .nav__ness-logo { transform: translateY(0px); } 
}

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

  /* these two rules below are unnecessary right now because we make this change higher up now because of the Pumpkin Spice video, but when we remove that video we'll need these rules again */
  body.homepage .nav__menu-button { transform: translateY(0px); } 
  body.homepage .nav__ness-logo { transform: translateY(0px); } 

  .nav__menu-button { flex-basis: calc(100px); }
  .nav__ness-logo { flex-basis: calc(100px * .84); }

  .nav__bottom-row { paddings: 0; }
  .nav__bottom-row-inner { max-widths: 200px; margin-top: 14px; /* don't reduce this, or you'll see the top of the flower image when nav is collapsed on mobile https://i.imgur.com/Ghb9z9U.png */ }

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

  /*[data-nav-content="collapsed"] .nav__close { opacity: 0; transition: opacity 1.2s; }*/
  
  .nav__back-arrow { display: none; }
  .nav__back-arrow--mobile { display: flex; top: var(--page-content-horizontal-padding); left: var(--page-content-horizontal-padding); opacity: 0; /* JS shows when needed */ };
  
  .nav__products-link { font-size: 16px; }

  .nav__close { width: 30px; top: var(--page-content-horizontal-padding); right: var(--page-content-horizontal-padding); }
  .nav__close-image { width: 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: 90vh; padding-bottom: 50px; }
}




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

.page-container { margin: 0 auto; /*max-width: calc(100% - 60px);*/ /*max-width: 2000px;*/ background: var(--violet); }

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

/*
@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 arch graphic
/* -------------------------------------------------------------------------- */

.whatcha { display: block; position: absolute; top: 100px; left: var(--page-content-horizontal-padding); width: clamp(90px, 7vw, 130px); text-align: center; z-index: 10; }
.whatcha--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 */


.whatcha__waves-image { width: 40%; margin-bottom: 10px; }
.whatcha__waves-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 */
/*.whatcha__open-or-close-button { display: inline-block; width: 30px; margin-bottom: 10px; }*/


/* arch  */

.explore-your-ness { display: block; position: absolute; top: 100px; right: 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 */
  .whatcha { top: 90px; }
  .explore-your-ness { top: 90px; }
}

@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 */
  .whatcha { top: 80px; }
  .explore-your-ness { top: 80px; }
}

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

@media only screen and (max-width: 767px)
{
  .whatcha { width: 74px; }
  .explore-your-ness { 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)
{
  .whatcha--open { display: none; }
  .whatcha--close { display: none; }

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


  .explore-your-ness { display: none; }
}





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

.hero { /*position: relative; 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: 30px; }

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

.hero__panel { borders:solid 1px red; flex: 0 0 100%; height: 56vw; display: flex; flex-flow: row wrap; align-items: center; justify-content: center; overflow: hidden; /* 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: 30px; left: 0; width: 100%; height: 20px; display: flex; justify-content: center; gap: 20px; z-index: 5; }
.hero__toggle-button { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--yellow); 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(--yellow); }
[data-hero-panel-toggle-status=""]:hover { cursor: pointer; }



.hero__video { /*position: absolute; top: 100%; left: 100%;*/ min-width: 102%; min-height: 102%; margin-left: -1%; margin-top: -1%; 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 { borders:solid 1px green; width: 102%; height: 102%; /*margin-left: -1%; margin-top: -1%; as of feb-27-2026, we do NOT want these to have -1% margins because it will OFF-CENTER things, because the .hero__panel is centering things regardless of the "102%" width because of the flex + align-items: center and flex + justify-content: center; rules */ /*width: auto; height: auto;*/ vertical-align: bottom; }
.hero__image--mobile { display: none; }

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

@media only screen and (min-width: 2000px)
{
  /*.hero { height: 1130px; }*/
}

@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; }*/


}

@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; }

  .hero__image--desktop { display: none; }
  .hero__image--mobile { display: inline; } /* todo jan-24-2024: might need more of the bzam rules here */


  .hero { height: 177.777777vw; /* video is 1.77x taller than wide but we need some cropping so it sits behind the wavy bottom */ margin-top: 32px; } /* would rather use margin-top of 36px but that doesn't work in all scenarios */
  .hero__panel { height: 177vw; }
  .hero__video { min-width: 104%; min-height: 104%; margin-left: -2%; margin-top: -3%; }
  .hero__video--mobile { /*min-width: 234%; min-height: 234%; margin-left: -72%; margin-top: -84%;*/ }
  /*.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 */
}
@media only screen and (max-width: 359px)
{
  .hero__video { min-width: 106%; min-height: 106%; margin-left: -3%; margin-top: -3%; }
}



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

 /* flex stuff  */

.just { display: flex; flex-flow: row wrap; align-items: stretch; }

/* non-flex */

.just { /*margin: 0 80px;*/ padding: 0 var(--page-content-horizontal-padding); }
.just--individual-product-page { padding: 65px var(--page-content-horizontal-padding) 30px; 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="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__new-item { position: absolute; width: 100%; text-align: center; /*left: 50%;*/ top: 20%; /* this top value of 20% works for SQUISH'D BERRY but might not if we need this text over more items in future */ /*transform: translate(-50%, 0);*/ font-family: 'Vacation-Heavy'; color: var(--yellow); font-size: clamp(13px, 1.2vw, 20px); letter-spacing: 1px; text-decoration: underline; z-index: 2; }
.strain-carousel__image { position: absolute; width: 74%; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2}
.strain-carousel__image--blue-kiwi { width: 64%; }
.strain-carousel__image--strawberry-jack { width: 51%; }
.strain-carousel__image--iced-peachy-mango { width: 61%; }
.strain-carousel__image--neon-dragon { width: 74%; }
.strain-carousel__image--pink-pineapple { width: 51%; }

.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% / 5); } /* todo: set back to 7 if we have more than 6 products in future (some time after mar-28-2024) */

[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% / 5); } /* todo: set back to 6 if we have more than 5 products in future (some time after mar-28-2024) */

[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: 1600px)
{
}

@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__new-item { font-size: clamp(13px, 3.2vw, 20px); }


  /* 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: var(--violet-light); 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 30px /*clamp(90px, 12vw, 130px) unhide if we show the big-card elements in future */; padding: 0 var(--page-content-horizontal-padding); background: url(/img/new__bg--ness-version.svg) no-repeat center center / 100%; }

.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: 0 0 50%; 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 { max-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__button-container { display: flex; flex-flow: row wrap; gap: 16px 16px; }

.new__learn-more-button { color: #f8be32; background-color: #ee661e; }
.new__learn-more-button:hover { cursor: pointer; background-color: #e33522; }
.new__learn-more-button--dark-cherry { background-color: #ec3c45; color: #800f45;  }
.new__learn-more-button--squishd-berry { background-color: #67c7fc; color: #800f45;  }
.new__learn-more-button--ninja-fruit { color: var(--violet-light); background-color: #eae100; }
.new__learn-more-button--dark-cherry:hover { background-color: #c42145; }
.new__learn-more-button--squishd-berry:hover { background-color: #5a9efc; }
.new__learn-more-button--ninja-fruit:hover { background-color: #a5a231; }
/*.new__learn-more-button--blue-kiwi { color: var(--violet-light); background-color: #6dc0dc; }
.new__learn-more-button--blue-kiwi:hover { background-color: #4998ad; }*/

.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(46px, calc(3vw + 20px), 100px) 0 20px /* clamp(100px, 9vw, 120px); unhide if we show the big-card elements in future*/ }
}

@media only screen and (max-width: 767px)
{
  .new { margin: 40px 0 60px; background: url(/img/new__bg-mobile--ness-version.svg) no-repeat top -2.2vh center / 100%; }
  
  .new__image-container { flex-basis: 100%; }
  .new__content-container { flex-basis: 100%; padding: 40px 0 40px; text-align: center; }
  .new__button-container { justify-content: center; }

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


}




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

.big-card { margin: 40px 0 60px; padding: 0 var(--page-content-horizontal-padding); display: flex; flex-flow: row wrap; background: url(/img/big-card__bg.svg) no-repeat center center / cover; }


.big-card__content-container { flex: 1; border: 1px solid var(--yellow); border-right: none; text-align: center; padding: 30px 0 40px; background-color: var(--violet-light); }
.big-card__content-container--reversed-order { order: 2; border-right: 1px solid var(--yellow); }

.big-card__visuals-container { flex: 0 0 50%; border: 1px solid var(--yellow); position: relative; overflow: hidden;  }
.big-card__visuals-container--reversed-order { order: 1; border-right: none; }
.big-card__visuals-container--flower { backgrounds: url(/img/big-card__flower.jpg) no-repeat center center / cover; }
.big-card__visuals-container--vaporizers { backgrounds: url(/img/big-card__vaporizers.jpg) no-repeat center center / cover; }
.big-card__visuals-container--pre-rolls { backgrounds: url(/img/big-card__pre-rolls.jpg?v=2) no-repeat center center / cover; }

/* left col contents */

.big-card__perk { margin: 30px 0 0; background: url(/img/section-divider--line-only.svg) repeat-x center center / contain; }
.big-card__perk-image { max-width: clamp(180px, 40%, 380px); margin-bottom: 20px; }

.big-card__heading-image { height: min( calc(4vw - 4px), 80px ); margin-bottom: 20px; }

.big-card__text { margin: 20px 20px; font-size: 22px; font-family: 'Bookmania-Regular'; color: var(--yellow);  line-height: 1.3;}
.big-card__button { margin-top: 20px; display: inline-block; }

/* right col contents */

.big-card__hero-video { position: absolute; top: 0; left: 0; bottom: 0; right: 0 ; margin: auto;  }


@media only screen and (max-width: 2300px)
{
  .big-card__perk { background-size: 1000px; }
}

@media only screen and (max-width: 767px)
{
  .big-card__text { font-size: 20px; }
  .big-card__text br { display: none }
}


@media only screen and (max-width: 600px)
{
  .big-card { padding-left: 0; padding-right: 0; margin-bottom: 10px; }
  
  .big-card__content-container { order: 2; flex-basis: 100%; /*border-right: 1px solid var(--yellow); border-top: none;*/ border: none; border-bottom: 1px solid var(--yellow); padding: 34px 0; }
  .big-card__visuals-container { order: 1; flex-basis: 100%; border-left: none; border-right: none; }

  .big-card__perk { margin-top: 0; }
  .big-card__perk-image { /*max-width: 180px;*/ }
  .big-card__heading-image { height: 8.5vw; }
  .big-card__text { margin-left: 8vw; margin-right: 8vw; font-size: 20px; }

}




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

/* flex stuff  */
:root
{
  --carousel-violet-flower-top-height: 50px;
}

/*.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: calc(100% - (var(--page-content-horizontal-padding) * 2 - 92px)); /* 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%; }


[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; max-widths: 100%; /*padding-top: var(--carousel-violet-flower-top-height);*/ }
.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; }
[data-carousel-panel-heading-only] {  /*aspect-ratio: 1.25;*/ }
[data-carousel-panel-heading-only]:hover { cursor: default; }
[data-carousel-panel-heading-only] .carousel__panel-image-container { aspect-ratio: 1.25; background-color: #a7005b; }

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

.carousel__panel-image-container,
.carousel__panel-heading-container { flex: 0 0 100%; width: 100%; paddings: 20px; position: relative; overflow: hidden; }
.carousel__panel-image-container { border: solid 1px yellow; }
.carousel__panel-heading-container { aspect-ratio: 1.25; display: flex; flex-flow: row wrap; align-items: center; justify-content: center;  }

.carousel__panel-heading-container-inner { margin: 0 20px; display: flex; flex-flow: row wrap; align-items: center; justify-content: center; gap: max(20px, 3vw) 0; }
.carousel__panel-heading-multi-packs { margin-top: 4%; max-width: 55%; }

.carousel__panel-pre-hover-image { z-index: 2; position: relative; transition: opacity .3s; }

.carousel__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; }

.carousel__corner-badge { position: absolute; width: 30%; right: 0; top: 0; /*transform: translate(-50%, 0);*/  }

.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; }
.carousel__image--hovered { position: absolute; top: 0; z-index: 1; /*margin-top: -1px;*/ /* if you change this, update the JS where we "set the image-container height" */ }

.carousel__panel-heading-heading { text-align: center; }
.carousel__panel-heading-subheading { text-align: center; font-size: 20px; color: var(--yellow); }


.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: "Jaune-GrandeBlack"; color: var(--yellow); display: inline; word-break: break-word; }
.carousel__panel-info { margin: 0; padding: 0; font-size: 24px; font-family: "Jaune-GrandeBlack"; line-height: 1.2; color: var(--yellow); 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: clamp(26px, 1.7vw, 40px); }
.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) 6px; border: 1.5px solid var(--yellow); border-radius: 50%; text-align: center; font-family: "Bookmania-Regular"; 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(--yellow); font-size: clamp(19px, 1.3vw, 28px); justify-content: left; line-height: 1.3; }
.carousel__panel-additional-info-type { flex: 1; padding: clamp(15px, 1vw, 18px); font-family: serif; 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(--yellow); 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, 1.8vw, 24px); /*padding: 5px 10px;*/ }

  .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__arrow-container { flex-basis: 36px; }

  .carousel__panel-additional-info-type { padding: 12px; }
}

@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(16px, 2.8vw, 26px); }
  
  .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 (max-width: 700px) and (min-width: 601px)
{
  .carousel__panel-heading-subheading { font-size: 18px; }
}

@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: 60px; }
  .carousel--products-page {  }

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

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

  /* 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: var(--violet-light); 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; }

  /* on mobile, the heading-only cards shouldn't show "DOM" below, and should have less space underneath */
  [data-carousel-panel-heading-only] { margin-bottom: 36px; }
  [data-carousel-panel-heading-only] .carousel__panel-info-container { display: none; }

  .carousel__panel-info { margin: 18px 0 36px; }
  .carousel__panel-strain-name { padding: 0 3%; font-size: clamp(20px, 5.5vw, 26px); }
  .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; }

  /* contains "Multi-Packs" svg and "Whole bud,..." text */
  .carousel__panel-heading-container-inner { gap: max(20px, 10vw) 0; }

}




/* -------------------------------------------------------------------------- */
/* 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/stockist__bg.jpg'); 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) ); }

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

.find-a-stockist__heading { max-width: 600px; margin: 0 auto 30px; text-align: center; }
.find-a-stockist__heading-image-mobile-only { display: none; }

.find-a-stockist__subheading { font-size: 22px; font-family: "Bookmania-Regular"; text-align: center; padding: 0 80px; line-height: 1.2; color: var(--yellow); }

/*.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: "Bookmania-Regular"; }
.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-color: var(--violet); }
.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(--yellow); font-family: "Bookmania-Regular"; }
.stockist-dropdown__toggle-right { flex: 0 0 160px; padding: 17px; 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(--yellow); font-family: "Vacation-Heavy"; font-size: 22px; }
.stockist-dropdown__toggle-right:hover { background-color: #e83d1d; }

[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: 22px; right: 16px; }

.stockist-dropdown__dropdown { display: none; position: absolute; width: calc(100% - (160px - 1px)); margin-top: 54px; margin-bottom: 20px; top: 0; left: 0; background-color: var(--violet); 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(--yellow); 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(--yellow); }

/* 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(--yellow); }
.stockist-dropdown__provincial-stores-heading { padding: 20px 24px 10px; color: var(--yellow); 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: #9c1d64; color: var(--yellow); 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__heading-image-desktop-only { display: none; }
  .find-a-stockist__heading-image-mobile-only { display: inline; max-width: 300px; }
}

@media only screen and (max-width: 480px)
{
  .stockist-dropdown__toggle-left { padding: 17px 42px 14px 12px; line-height: 1.3; }
  .stockist-dropdown__toggle-right { font-size: 18px; padding: 17px 10px; flex-basis: 112px; }

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

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











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




.footer { z-index: 2; position: relative; }

.footer__disclaimer { max-width: 860px; margin: 0 auto; padding: 10px 30px 30px; text-align: center; font-family: "Bookmania-Regular"; font-size: 15px; line-height: 1.2; font-style: italic; color: #cd6a8d;  } /* this goes above footer__inner because it's not inside of footer__inner because it needs to be full-width */

.footer__inner { padding: 40px var(--page-content-horizontal-padding) 60px; borders:solid 1px red; background-color: var(--violet); }

.footer__inner-inner { max-width: 2200px; margin: auto; z-index: 2; position: relative; display: flex; flex-flow: row wrap; }

.footer__join-heading { font-family: Jaune-GrandeBlack; font-size: 22px; margin-bottom: 32px; color: var(--yellow); }

/* 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: "Bookmania-Regular"; 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 { borders:solid 1px red; flex: 0 0 50%; padding: 20px 80px 20px 20px; }
.footer__category-container { borders:solid 1px red; flex: 0 0 calc( (50% / 3) - (60px / 3) ); padding: 20px; }
.footer__category-container--shop { margin-left: 60px; position: relative; }

/* second row on desktop, with privacy etc and social-media links */
.footer__privacy-etc-container { flex: 0 0 calc((100% * 5 / 6) + 20px); padding: 30px 20px; borders:solid 1px red; color: var(--yellow); font-family: "Bookmania-Regular"; line-height: 1.3em; }
.footer__social-container { flex: 1; padding: 30px 20px; borders:solid 1px red; min-height: 40px; }
  
.footer__form { padding-bottom: 15px; }
.footer__form-inputs-container { position: relative; display: flex; flex-flow: row wrap; justify-content: space-between; margin-bottom: 6px; }
.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; }


.footer__input { flex: 0 0 calc(50% - 5px); max-width: calc(50% - 5px); margin: 0 0 10px 0; padding: 16px; border: none; border-radius: 20px; font-size: 15px; height: 47px; outline: none !important; background-color: var(--violet-light); color: var(--yellow); position: relative; font-family: "Bookmania-Regular"; }
.footer__input::placeholder { color: var(--yellow); }
/*.footer__input--email { flex: 0 0 100%; max-width: 100%; }*/


.footer__province-container { flex: 0 0 calc(50% - 5px); max-width: calc(50% - 5px); height: 47px; outline: none !important; color: var(--yellow); position: relative; display: flex; flex-flow: row wrap; align-items: center;  font-family: "Bookmania-Regular"; }

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

/*.footer__province-container[data-newsletter] { border-radius: 20px 20px 0 0; }*/

.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; border-radius: 20px; font-size: 15px; height: 47px; outline: none !important; position: relative; background-color: var(--violet-light); display: flex; flex-flow: row wrap; align-items: center; }

.footer__province-dropdown-toggle[data-newsletter-province-dropdown-toggle="on"] { border-radius: 20px 20px 0 0; }

.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-color: var(--violet-light); border-radius: 0 0 20px 20px; padding-bottom: 20px; z-index: 3; }

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

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


.footer__submit-link { /*position: absolute; display: block; bottom: 0; right: 10px; transform: translateY(-23px);*/ display: block; width: 150px; height: auto; margin-top: 12px; text-align: right; }
.footer__submit-text { display: inline; font-family: "Bookmania-Regular"; font-size: 16px; color: var(--yellow); }
.footer__submit-image { max-width: 60px; vertical-align: bottom; }

.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(--yellow); position: absolute; top: 0; left: 0; height: 25px; width: 25px; background-color: var(--yellow); }
.footer__form-disclaimer-text { flex: 1; font-family: "Bookmania-Regular"; font-size: 13px; color: var(--yellow); 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-dark); }
  
/* 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(--yellow); }
  
/* 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(--yellow); }
  
/* 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(--violet); border-width: 0 4px 4px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }

/* .. end custom checkbox styling */

/* 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-flavour-page-only { font-family: "Bookmania-Regular"; font-size: 16px; color: var(--yellow); line-height: 1.5; margin-top: 26px; }

.footer__category-heading { font-family: "Bookmania-Regular"; font-size: 13px; font-style: italic; color: var(--yellow); text-transform: uppercase; margin-bottom: 30px; }

.footer__link { display: block; margin: 14px 0; color: var(--yellow); font-family: "Vacation-Heavy"; font-size: clamp(24px, 1.6vw, 26px); }
.footer__link:hover { color: var(--yellow-dark); }
.footer__link--email { font-family: "Bookmania-Regular"; font-size: 16px; }

.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__privacy-etc-text { font-size: 11px; line-height: 15px; }

.footer__social-icons { text-align: right; }

.footer__social-icon { display: inline-block; width: min(24%, 40px); margin-right: min(6%, 10px); background-size: cover; }
.footer__social-icon--instagram { background-image: url('/img/footer__social-icon-instagram.svg'); }
.footer__social-icon--facebook { background-image: url('/img/footer__social-icon-facebook.svg'); }
.footer__social-icon--twitter { background-image: url('/img/footer__social-icon-twitter.svg'); }
.footer__social-icon--last { margin-right: 0; }

.footer__social-icon img { max-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)
{
  .footer__category-container { padding-left: 1vw; padding-right: 1vw; }
  .footer__link { font-size: 1.6vw }
  .footer__link--email { font-size: 1.2vw }
  .footer__link-image { height: 1.2vw; }
}
@media only screen and (max-width: 1200px)
{
  .footer__category-container { padding-left: .8vw; padding-right: .8vw; }
  .footer__link-image { height: 1vw; }

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

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

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

  .footer__privacy-etc-container { flex-basis: 100%; }

  .footer__mobile-only-links { display: block; }
  .footer__mobile-only-links--social { position: absolute; bottom: 20px; left: .8vw; /* height: 20px; */ 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__social-container { display: none; }
}

@media only screen and (min-width: 768px) and (max-width: 1000px) 
{
  .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: 860px)
{
  .footer__join-heading { font-size: 20px; }
}


/* 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 (min-width: 768px) and (max-width: 959px)
{

  .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; }

  .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: "Bookmania-Regular"; font-size: 16px; color: var(--yellow); }
  .footer__submit-image { width: 54px; margin-bottom: 2px; /* appears more vertically-centered this way */ }

  .footer__submit-link:hover .footer__submit-text { color: var(--yellow-dark); }

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

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

  .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 { display: none; /*order: 4; flex-basis: 50%;*/ }
  .footer__privacy-etc-container { order: 6; padding-left: 0; padding-right: 0; }
  .footer__social-container { display: none; /*order: 3; flex-basis: 50%; padding: 0;*/ }

  .footer__category-heading { margin-bottom: 20px; }
  
  .footer__link { font-size: 20px; }

}

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

  .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; }
}

/* 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: 413px)
{

  .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: "Bookmania-Regular"; font-size: 16px; color: var(--yellow); }
  .footer__submit-image { width: 54px; margin-bottom: 2px; /* appears more vertically-centered this way */ }

  .footer__submit-link:hover .footer__submit-text { color: var(--yellow-dark); }
}

@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: 4.5vw; }

  
}

 






/* -------------------------------------------------------------------------- */
/* 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__squiggle { height: 20px; overflow: hidden; position: relative; }

.below-footer__squiggle-image { width: var(--squiggle-width); position: absolute; top: 0; left: -2px; /*transform: translateX(-50%);*/ }
.below-footer__squiggle-image--2 { left: calc( var(--squiggle-width) - 4px ); }
.below-footer__squiggle-image--3 { left: calc( var(--squiggle-width) * 2 - 6px ); }
.below-footer__squiggle-image--4 { left: calc( var(--squiggle-width) * 3 - 8px ); }
.below-footer__squiggle-image--5 { left: calc( var(--squiggle-width) * 4 - 10px ); }
.below-footer__squiggle-image--6 { left: calc( var(--squiggle-width) * 5 - 12px ); }


.below-footer__content { /*margin: 0 30px;*/ background: var(--yellow); padding: 0px 0 6px; font-family: "Bookmania-Regular"; font-weight: bold; font-size: 18px; font-style: italic; color: var(--violet); borders:solid 1px red; }

.below-footer__light-text { color: var(--orange); }

.below-footer__logo { width: 110px; vertical-align: middle; display: inline-block; margin: 0 8px; }
.below-footer__logo--bzam { width: 110px; margin: 0 4px 0 12px; /* needs strange margins to appear centered */ }
.below-footer__logo--tgod { width: 130px; }
.below-footer__logo--highly-dutch-organic { width: 160px; }
.below-footer__logo--cookies { width: 100px; }
.below-footer__logo--high-stick { width: 50px; }

.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; background: var(--yellow-light); border-bottom: 1px solid var(--yellow); }

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

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

.strain-hero__left-column { flex: 1.5; min-width: 400px; borders: solid 1px red; padding-bottom: 40px; }
.strain-hero__right-column { flex: 1; borders: solid 1px red; position: relative; padding-right: 20px; }

/* left column contents */

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

.strain-hero__new-item-label-on-image { display: none; /* only shows on stacked layout */ position: absolute; top: 4vw; left: 22vw; width: 15vw; height: 15vw; 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--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: "Jaunev0.6-GrandeBold"; color: var(--violet); }
/*.strain-hero__toggle-button-container--multi-pack { 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(--violet); }
/*.strain-hero__image-toggle-button--multi-pack { cursor: default; }*/

.strain-hero__image-toggle-dot {background-color: var(--violet); 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); }

.strain-hero__vanity-actual-disclaimer { color: var(--violet); opacity: 0.4; text-align: center; margin: 20px auto 0; font-family: "Bookmania-Regular"; font-size: 11px; padding: 0 60px; max-width: 740px; }

/* right column contents */

.strain-hero__new-item-label-on-strain-name { position: absolute; top: -40px; left: -86px; width: 96px; height: 96px; }
.strain-hero__heading { font-family: "Jaune-GrandeBlack"; color: var(--violet); font-size: 60px; line-height: 1.15; margin-bottom: 40px; }
.strain-hero__subheading { font-family: "Jaune-GrandeBlack"; color: var(--violet); font-size: 24px; line-height: 1.15; margin-bottom: 40px; }
.strain-hero__description { font-family: "Bookmania-Regular"; font-weight: bold; color: var(--violet); font-size: 20px; line-height: 1.2; margin-bottom: 50px; }

.strain-hero__thc-and-type { display: flex; align-items: center; margin-bottom: 10px; }
.strain-hero__thc { font-family: "Jaune-GrandeBlack"; color: var(--violet); font-size: clamp(20px, 2vw, 26px); margin-right: 16px; }
/* no BEM for this because used in mutliple places and called via PHP */
.strain-hero__thc .thc-subtext { font-family: "Bookmania-Regular"; font-size: 20px; line-height: 1.2; }
.strain-hero__type-oval {
    /*flex: 0 0 80%;*/
    padding: 10px;
    background: url(/img/strain-hero__type-oval.svg) no-repeat center center / contain;
    text-align: center;
    font-family: "Bookmania-Bold";
    font-style: italic;
    font-size: 16px;
    color: var(--violet);
    text-transform: uppercase;
}

.strain-hero__percent-wrapper { height: 28px; width: 100%; margin: 0 0 10px; position: relative; border: 2px solid var(--violet);  border-radius: 18px; overflow: hidden; }
.strain-hero__percent-filled { height: 100%; border-radius: 18px 0 0 18px; background-color: var(--yellow); width: 0; /* JS animates this to its final width based on data-params in the HTML so edit strains-array.inc.php to change this */ }

.strain-hero__cbd { font-family: "Bookmania-Regular"; font-style: italic; font-size: 16px; color: var(--violet); font-weight: bold; text-align: right; }

.strain-hero__button { background-color: var(--violet); margin-top: 24px; margin-bottom: 10px; }


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

@media only screen and (max-width: 1400px)
{
  .strain-hero__heading { font-size: max(36px, 4vw); }
  .strain-hero__new-item-label-on-strain-name { width: clamp(50px, 6vw, 6vw); height: clamp(50px, 6vw, 6vw); top: -3vw; left: -4vw; }
  .strain-hero__description { font-size: 18px; }
}

@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__inner { padding-bottom: 30px; }
  
  .strain-hero__inner-inner { gap: 10px 0; }
  
  .strain-hero__left-column { flex: 0 0 100%; min-width: auto; orders: 2; }
  .strain-hero__right-column { flex: 0 0 100%; orders: 1; padding-right: 0 }

  /* left col contents */
  .strain-hero__new-item-label-on-image { display: inline; } /* show "NEW" label on image */
  
  /* right col contents */
  .strain-hero__new-item-label-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; }

  .strain-hero__percent-wrapper { margin-bottom: 30px; }

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

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

  .strain-hero__vanity-actual-disclaimer { font-size: 10px; }

  .strain-hero__description { letter-spacing: -.25px; }

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

@media only screen and (max-width: 350px)
{
  .strain-hero__heading { font-size: 10vw; }
}

/* 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: 0 var(--page-content-horizontal-padding) 80px; }

.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: 1200px)
{
  .strain-info-and-floating-image-container { padding-left: 60px; padding-right: 60px; }
}

@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; }

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

/* the double-wide main heading section */
.strain-info__double-wide { flex: 0 0 100%; text-align: center; color: var(--orange); font-family: "Bookmania-Bold"; font-size: 32px; }
.strain-info__double-wide--heading { padding: 20px 0; border-top: none; border-bottom: 1px solid var(--yellow);  }

/* the left-col ("PRODUCTS", "TYPE", etc) */
.strain-info__heading { flex: 0 0 120px; padding-top: 30px; text-align: right; color: var(--orange); font-family: "Bookmania-Bold"; font-size: 16px; }
.strain-info__heading--products { padding-top: 36px; }

/* the right col ("1g Cartridge", "Hybrid", etc) */
.strain-info__details { flex: 1; border-top: 1px solid var(--yellow); padding: 20px 0 30px; color: var(--yellow); font-family: "Jaune-GrandeBlack"; font-size: 20px; line-height: 1.2; }
.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: 10px; padding-bottom: 0; }
.strain-info__details--products { padding-top: 26px; display: flex; flex-flow: row wrap; }
.strain-info__details--section-logo { text-align: center; }
/*.strain-info__details--multi-pack-products { display: flex; }*/

.strain-info__section-logo { max-width: clamp(100px, 80%, 352px); }
.strain-info__section-logo--full-width { max-width: clamp(100px, 100%, 440px); }


/* no BEM for this because used in mutliple places and called via PHP */
.strain-info__details .thc-subtext { font-family: "Bookmania-Regular"; color: var(--yellow); font-size: 16px; line-height: 1.2; }

.strain-info__genetics { display: inline-block; margin-top: 6px; margin-bottom: 10px; background: var(--violet-light); padding: 20px 20px; border-radius: 6px; }
.strain-info__details .strain-info__genetics:last-child { margin-bottom: 0; }
/*.strain-info__genetics--first { margin-top: 6px; margin-bottom: 18px; }*/

/* products are more complex because we need icon to flex-left always */
.strain-info__product-row { flex: 0 0 100%; display: flex; flex-flow: row wrap; }

.strain-info__product-icon { flex: 0 0 30px; width: 30px; text-align: left; margin-right: 12px; /*margin-bottom: 16px;*/ }
.strain-info__product-icon--specs-section { margin-top: 12px; }

.strain-info__product-icon-image { max-height: 36px; vertical-align: middle; }

.strain-info__product-text { flex: 1; /*padding-bottom: 20px;*/ }

.strain-info__also-available { font-family: Bookmania-Regular; font-size: 14px; }
.strain-info__also-available-arrow { width: 22px; margin-left: 3px; }

.strain-info__terpene-with-space-between { display: flex; gap: 0 6px; flex-wrap: wrap; justify-content: space-between; }


@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__row { flex-flow: column nowrap; gap: 0; }
  .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(--yellow); }
  .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; }
}



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



/* nug - contents */
.floating-image { flex: 1; bordesr:solid 1px red; }

.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%; }
}



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

.compare { background: var(--violet-light); padding: 60px 0 120px; color: var(--yellow); }

.compare__inner { margin: 0 var(--page-content-horizontal-padding); }

.compare__heading { margin: 0 0 100px 0; text-align: center; }
.compare__divider-image { max-width: 360px; }
.compare__heading-image { max-height: 70px; margin-top: 40px; }

.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: "Jaune-GrandeBlack"; 
    /*font-weight: 500;*/
    font-size: 16px;
    line-height: 1;
    letter-spacing: 2px;
    color: var(--yellow);
    /*display: block;*/
    text-transform: uppercase;
    margin: 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: "Bookmania-Regular"; font-size: 13px; letter-spacing: 0; text-transform: none; text-decoration: none; padding: 10px 0 0 10px; background: url(/img/compare__arrow.svg) no-repeat left center / contain; }

.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: 26px 0 0; position: relative; display: flex; align-items: center; justify-content: center; z-index: 2; }

.compare__strain-info-panel { height: 130px; margin: 26px 0 0; background-color: var(--violet); border-right: 2px solid var(--violet-light); padding: 0 24px; display: flex; align-items: center; font-family: "Bookmania-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; }

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

.compare__strain-name-image--iced-peachy-mango { max-width: calc( var(--compare-strain-name-image-base-width) + 9%); }
.compare__strain-name-image--neon-dragon { max-width: calc( var(--compare-strain-name-image-base-width) + 14%); }
.compare__strain-name-image--pink-pineapple { max-width: calc( var(--compare-strain-name-image-base-width) - 3%); }

.compare__strain-name-image--grape-razz { max-width: calc( var(--compare-strain-name-image-base-width) + 8%); }
.compare__strain-name-image--strawberry-jack { max-width: calc( var(--compare-strain-name-image-base-width) - 2%); }

.compare__strain-name-image--squishd-berry { max-width: calc( var(--compare-strain-name-image-base-width) + 13%); }

.compare__strain-name-image--dark-cherry { max-width: calc( var(--compare-strain-name-image-base-width) + 15%); }

.compare__strain-name-image--mint-sour { max-width: calc( var(--compare-strain-name-image-base-width) + 7%); }
.compare__strain-name-image--double-mint-sherbet { max-width: calc( var(--compare-strain-name-image-base-width) + 6%); }
.compare__strain-name-image--gas-cake { max-width: calc( var(--compare-strain-name-image-base-width) + 4%); }
.compare__strain-name-image--jelly-breath { max-width: calc( var(--compare-strain-name-image-base-width) + 15%); }


.compare__strain-name-image--strawberry-orange-smoothie { max-width: calc( var(--compare-strain-name-image-base-width) + 10%); }

.compare__strain-name-image--east-coast-brunch { max-width: calc( var(--compare-strain-name-image-base-width) + 14%); }
.compare__strain-name-image--red-velvet-cupcake { max-width: calc( var(--compare-strain-name-image-base-width) + 15%); }
.compare__strain-name-image--seattle-sour-breath { max-width: calc( var(--compare-strain-name-image-base-width) + 4%); }

.compare__strain-name-image--grape-octane { max-width: calc( var(--compare-strain-name-image-base-width) + 20%); }
.compare__strain-name-image--spiced-vanilla-mint { max-width: calc( var(--compare-strain-name-image-base-width) + 0%); }
.compare__strain-name-image--nectarine-squeeze { max-width: calc( var(--compare-strain-name-image-base-width) + 22%); }

.compare__strain-name-image--honeycomb { max-width: calc( var(--compare-strain-name-image-base-width) + 12%); }
.compare__strain-name-image--blueberry-pancakes { max-width: calc( var(--compare-strain-name-image-base-width) + 16%); }
.compare__strain-name-image--green-boost { max-width: calc( var(--compare-strain-name-image-base-width) + 8%); }

.compare__strain-name-image--cactus-breath { max-width: calc( var(--compare-strain-name-image-base-width) + 18%); }
.compare__strain-name-image--lift-ticket { max-width: calc( var(--compare-strain-name-image-base-width) + 10%); }
.compare__strain-name-image--orange-whip { max-width: calc( var(--compare-strain-name-image-base-width) + 18%); }

.compare__strain-name-image--lime-soda { max-width: calc( var(--compare-strain-name-image-base-width) + 8%); }
.compare__strain-name-image--pineapple-purps { max-width: calc( var(--compare-strain-name-image-base-width) + 18%); }
.compare__strain-name-image--blue-kiwi { max-width: calc( var(--compare-strain-name-image-base-width) - 14%); }
.compare__strain-name-image--grape-punch { max-width: calc( var(--compare-strain-name-image-base-width) + 6%); }
.compare__strain-name-image--wasabi { max-width: calc( var(--compare-strain-name-image-base-width) + 22%); }

.compare__strain-name-image--bermuda-sour { max-width: calc(var(--compare-strain-name-image-base-width) + 18%); }
.compare__strain-name-image--peachy-mack { max-width: calc(var(--compare-strain-name-image-base-width) + 16%); }
.compare__strain-name-image--guava-kush { max-width: calc(var(--compare-strain-name-image-base-width) - 6%); }
.compare__strain-name-image--pumpkin-spice { max-width: calc(var(--compare-strain-name-image-base-width) + 20%); }
.compare__strain-name-image--london-nog { max-width: calc(var(--compare-strain-name-image-base-width) + 16%); }
.compare__strain-name-image--secret-garden { max-width: calc(var(--compare-strain-name-image-base-width) + 10%); }
.compare__strain-name-image--red-eye-og { max-width: calc(var(--compare-strain-name-image-base-width) + 10%); }
.compare__strain-name-image--hella-jelly { max-width: calc(var(--compare-strain-name-image-base-width) + 2%); }


.compare__strain-name-image--lemon-berry { max-width: calc(var(--compare-strain-name-image-base-width) + 10%); }
.compare__strain-name-image--juice-jar { max-width: var(--compare-strain-name-image-base-width); }
.compare__strain-name-image--jackfruit { max-width: calc(var(--compare-strain-name-image-base-width) + 0%); }
.compare__strain-name-image--key-lime { max-width: calc(var(--compare-strain-name-image-base-width) + 0%); }
.compare__strain-name-image--pineapple-chunk { max-width: calc(var(--compare-strain-name-image-base-width) + 20%); }
.compare__strain-name-image--chem-de-la-chem { max-width: calc(var(--compare-strain-name-image-base-width) + 20%); }
.compare__strain-name-image--powdered-donuts { max-width: calc(var(--compare-strain-name-image-base-width) + 20%); }
.compare__strain-name-image--apricot-jelly { max-width: calc(var(--compare-strain-name-image-base-width) + 10%); }
.compare__strain-name-image--west-coast-banana-skunk { max-width: calc(var(--compare-strain-name-image-base-width) + 5%); }
.compare__strain-name-image--ninja-fruit { max-width: var(--compare-strain-name-image-base-width); }
.compare__strain-name-image--rainmaker { max-width: calc(var(--compare-strain-name-image-base-width) + 15%); }
.compare__strain-name-image--citrus-rush { max-width: calc(var(--compare-strain-name-image-base-width) + 20%); }
.compare__strain-name-image--k-smorz { max-width: calc(var(--compare-strain-name-image-base-width) + 20%); }
.compare__strain-name-image--nice-cream { max-width: calc(var(--compare-strain-name-image-base-width) + 15%); }

.compare__strain-info-panel .thc-subtext { font-family: "Bookmania-Regular"; color: var(--yellow); font-size: clamp(12px, 1vw, 14px); line-height: 1.2; }



/* this slide out that's only on JACKFRUIT currently */
.compare__product-also-comes-in { display: none; color: var(--violet); max-width: calc(var(--compare-strain-name-image-base-width) + 22%); }
.compare__product-also-comes-in-text-top { text-align: center; font-family: "Vacation-Heavy"; font-size: 19px; }
.compare__product-also-comes-in-text-bottom { margin-top: 8px; padding: 11px 0 10px 8px; background: url(/img/compare__product-also-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 { flex-basis: 100%; display: flex; align-items: stretch; justify-content: center; }
.compare__slide-out-strain--jackfruit-top { background-color: #f38120; }
.compare__slide-out-strain--jackfruit-top:hover { background-color: #d4642e; }
.compare__slide-out-strain--jackfruit-bottom { background-color: #cceaf1; }
.compare__slide-out-strain--jackfruit-bottom:hover { background-color: #8fb0ca; }

.compare__slide-out-strain--key-lime-top { background-color: #f6adcd; }
.compare__slide-out-strain--key-lime-top:hover { background-color: #cf799f; }
.compare__slide-out-strain--key-lime-bottom { background-color: #cceaf1; }
.compare__slide-out-strain--key-lime-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(--yellow);
    color: var(--violet);
    padding: 20px;
    border-radius: 10px;
    font-family: "Bookmania-Regular";
    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(--yellow);

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


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

  .compare__col-heading { padding-left: 16px; padding-right: 16px; font-size: min(1.2vw, 16px); }

  .compare__col-heading--strain-names { font-size: 11px; }
  .compare__over-items { 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__product-also-comes-in-text-top { font-size: 17px; }
  .compare__product-also-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__product-also-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__col-heading { font-size: 12px; }
  .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 (max-width: 760px)
{
  .compare__right { grid-template-columns: repeat(4,150px) 20px; }
}

@media (max-width: 600px)
{
  .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%; }
}




/* -------------------------------------------------------------------------- */
/* products ("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: "Bookmania-Regular"; font-weight: bold; color: var(--yellow); font-size: 22px; line-height: 1.2; flex: 1;  }
.products--pre-rolls { background-color: var(--violet-light); margin-top: calc( ( var(--section-divider-height) - 1px ) * -1); }
.products--dried-flower { margin-top: calc( ( var(--section-divider-height) - 1px ) * -1); background-color: var(--violet); }

.products__inner { padding: 0 80px; }

.products__heading-container { /*display: flex; flex-flow: row wrap; align-items: stretch; gap: 24px;*/ padding: clamp(120px, 15vw, 180px) var(--page-content-horizontal-padding) 200px; /*background: url(/img/products__flower-bg.jpg) no-repeat right center / contain;*/ }
.products__heading-container--dried-flower {  }
/*.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::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: url(/img/products__flower-bg.jpg) no-repeat right center / contain;
  background-size: contain;
  /*filter: opacity(.5);*/
}
.products__heading-container--vaporizers::before { background-image: url(/img/products__vaporizers-bg.jpg?v=4); }
.products__heading-container--pre-rolls::before { background-image: url(/img/products__pre-rolls-bg.jpg?v=4); }

.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: stretch; gap: clamp(24px, 2%, 50px); }


.products__count { flex: 0 0 clamp(46px, 2vw, 68px); display: flex; align-items: stretch; justify-content: center; }
.products__heading {  flex: 0 0 auto; display: flex; align-items: center; }
.products__heading--dried-flower-mobile { display: none; }
.products__subheading { flex: 0 1 clamp(400px, 30vw, 600px); font-size: clamp(22px, 1.4vw, 30px); }

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

.products__count-oval { background: url(/img/products__count-bg.svg) no-repeat center center / contain; font-style: italic; flex: 0 0 100%; display: flex; align-items: center; justify-content: center; padding: 3px 5px 0 1px; /* appears more centered this way */ font-size: clamp(22px, 1.1vw, 34px); }



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

@media only screen and (max-width: 1400px)
{
  .products__subheading { flex: 0 0 100%; margin-left: calc(46px + 24px); /* put subheading on its own line; this must always equal the width of the .products__count + the amount of GAP on the .products__heading-container */ }
}

@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: 120px; }
  .products__heading-container--vaporizers { padding-top: 120px; }
  .products__heading-container--pre-rolls { padding-top: 120px; }
  
}

@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__heading { max-height: 60px; margin-bottom: 56px; height: 100%; max-width: 100%; }
.stockists__heading--provincial-retailers { max-height: 101px; }

.stockists__paragraph { max-width: 520px; font-family: "Bookmania-Regular"; color: var(--yellow); font-size: 18px; line-height: 1.3; }
.stockists__br { display: none; }

.stockists__top { padding: 180px var(--page-content-horizontal-padding) 140px; background: url(/img/stockists__bg.jpg?v=3) no-repeat top right / contain; }

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

.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__retailers { padding: 110px var(--page-content-horizontal-padding) 140px; display: flex; flex-flow: row wrap; gap: 60px 20px;background-color: var(--violet-light); }

.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 { flexs: 0 0 50%; }
.stockists__retailers-flag-image { max-widths: 100%; height: 60px; }
.stockists__retailers-text { flexs: 0 0 50%; }
.stockists__retailers-heading { font-family: "Jaune-GrandeBlack"; color: var(--yellow); font-size: 23px; line-height: 1.2; margin-bottom: 12px; }
.stockists__retailers-subheading { font-family: "Bookmania-Regular"; color: var(--orange); 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: #9c1d64; color: var(--yellow); 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: 20px; }
  .stockists__retailers-subheading { font-size: 16.5px; }
}



/* bg image starts to make the text too difficult to read */
@media only screen and (max-width: 1350px)
{
  .stockists__top { background-size: calc(110% + (10vw) ); background-position: center right -27vw; }

  /*.stockists__retailers-right { max-width: 840px; }
  .stockist__retailers-card { flex-basis: calc(50% - 10px); }*/
  .stockists__retailers-flag-image { height: 50px; }
  .stockists__retailers-heading { font-size: calc(18.6px - .1vw); }
  .stockists__retailers-subheading { font-size: 15px; }

.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: 1200px)
{
  .stockists__retailers-left { flex: 0 0 100%; }
  .stockists__retailers-right { flex: 1; max-width: 700px; }

  .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 (min-width: 601px) and (max-width: 959px)
{
  .stockists__br { display: inline; }
}

/* this is when stockist switches to mobile (stacked) layout */
@media only screen and (max-width: 767px)
{
  .stockists__bottom { padding-right: var(--page-content-horizontal-padding); }

  
}

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

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

  .stockists__heading { margin-bottom: 24px; }
  .stockists__retailers-heading-wrapper { max-width: 82%; /* to ensure that this heading stays samller than the main page heading */ }

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

@media only screen and (max-width: 480px)
{
  .stockists__retailers-heading { font-size: 4.5vw; }
  .stockists__retailers-subheading { font-size: 3.9vw; }
  .stockists__retailers-flag-image { height: 14vw; }
}






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

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


.about-section { margin: 0 var(--page-content-horizontal-padding-about-and-legal-pages) -60px; }
.about-section--1 { /*margin-top: -100px;*/ z-index: 3; /*background-image: url(/img/about/about-section-1.jpg);*/ }
.about-section--2 { margin-top: 20px; /*background-image: url(/img/about/about-section-2.jpg);*/ }
.about-section--3 { margin-top: 20px; margin-bottom: calc( var(--section-divider-height) + 12vw ); /*background-image: url(/img/about/about-section-3.jpg);*/ }

.about-section__inner { display: flex; flex-flow: row wrap; justify-content: flex-start; align-items: center; gap: 6%; max-width: 1400px; margin: auto; /*background: url(/img/about/about-section-1.jpg) no-repeat center right / contain;*/ }
.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__text-container--reversed-order { order: 2; }
.about-section__image-container--reversed-order { order: 1; transform: scale(1.5) translateX(8%); }

.about-section__heading { max-height: 90px; height: 100%; /* this height: 100% is needed because otherwise Safari will center the SVG for some inexplicable reason; */ margin-bottom: 30px; }
.about-section__image { max-width: 100%; transform: }

@media only screen and (min-width: 2000px)
{
  .about-section--3 { margin-bottom: calc( var(--section-divider-height) + 240px ); }
}

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

@media only screen and (max-width: 600px)
{
  .about-heading { margin-top: 80px; width: 200%; transform: translateX(-20px); }
  
  .about-section--1 { margin-top: -9vh; }

  .about-section__heading { max-height: 70px; width: auto; borders:solid 1px red; }

  .about-section__image-container { order: 1; flex-basis: 100%; transform: scale(1.2); }
  .about-section__text-container { order: 2; flex-basis: 100%; text-align: left; borders:solid 1px red; }

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

}

@media only screen and (max-width: 410px)
{
  .about-section__heading { max-height: 60px; }
}
@media only screen and (max-width: 360px)
{
  .about-section__heading { max-height: 54px; }
}



/* -------------------------------------------------------------------------- */
/* legal pages
/* -------------------------------------------------------------------------- */


.legal-text { padding: 200px var(--page-content-horizontal-padding-about-and-legal-pages) 80px; }

.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: "Jaune-GrandeBlack"; color: var(--yellow); font-size: 28px; line-height: 1.2; margin-right: 40px; }
.legal-text__subheading { font-family: "Jaune-GrandeBlack"; color: var(--yellow); font-size: 28px; line-height: 1.2; margin-bottom: .8em; }

.legal-text__updated-date { /*flex: 0 0 300px;*/ border: 1px solid var(--yellow); padding: 8px 12px; border-radius: 14px; font-family: "Bookmania-Regular"; color: var(--yellow); 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: "Bookmania-Regular"; color: var(--yellow); font-size: 16px; 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%;*/ }
}






/* -------------------------------------------------------------------------- */
/* contest page
/* -------------------------------------------------------------------------- */

.contest-text { padding: 140px var(--page-content-horizontal-padding-about-and-legal-pages) 80px; }

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


.contest-text__heading { flex: 1; font-family: "Jaune-GrandeBlack"; color: var(--yellow); font-size: 28px; line-height: 1.2; margin-right: 40px; margin-bottom: .4em; }
.contest-text__subheading { font-family: "Jaune-GrandeBlack"; color: var(--yellow); font-size: 20px; line-height: 1.2; margin-bottom: 1.6em; }

.contest-text p,
.contest-text li { font-family: "Bookmania-Regular"; color: var(--yellow); font-size: 16px; line-height: 1.3; margin-bottom: 1.3em; }

.contest-text a { text-decoration: underline; }





/* -------------------------------------------------------------------------- */
/* flavour fan club
/* -------------------------------------------------------------------------- */

.flavour { padding: 110px var(--page-content-horizontal-padding-about-and-legal-pages) 120px; }

.flavour__inner { position: relative; max-width: 840px; margin: auto; }

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

.flavour__heading-and-subheading { text-align: center; z-index: 2; position: relative; /* needed for z-index to work */ }
.flavour__heading { margin-bottom: 30px; max-width: 90%; }
.flavour__heading--mobile { display: none; }
.flavour__subheading { font-family: "Bookmania-Regular"; font-size: 18px; color: var(--yellow); line-height: 1.3; margin-bottom: 46px; }

.flavour__thanks-for-joining { display: none; /* JS shows this when ready */ font-family: "Bookmania-Regular"; 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; }

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


.flavour__input { flex: 0 0 calc(50% - 8px); max-width: calc(50% - 8px); margin: 0; padding: 0 24px; border: none; border-radius: 20px; font-size: 15px; height: 47px; outline: none !important; background-color: #f1efd8; color: var(--violet); position: relative; font-family: "Bookmania-Regular"; font-weight: bold; }
.flavour__input::placeholder { color: var(--violet); }
.flavour__input--email { flex: 0 1 calc(100% - 216px); max-width: calc(100% - 216px); }
.flavour__province-container { flex: 0 0 200px; max-width: 200px; height: 47px; outline: none !important; color: var(--violet); position: relative; display: flex; flex-flow: row wrap; align-items: center;  font-family: "Bookmania-Regular"; font-weight: bold; }
.flavour__province-container {  }
.flavour__province-selected { max-width: 80%; }
/*.flavour__province-container[data-newsletter] { border-radius: 20px 20px 0 0; }*/

.flavour__disclainers-and-submit { display: flex; flex-flow: row wrap; gap: 30px 36px; align-items: flex-end; }
.flavour__disclainers { flex: 1; margin-left: 24px; }
.flavour__submit { flex: 0 0 282px; }


.flavour__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; border-radius: 20px; font-size: 15px; height: 47px; outline: none !important; position: relative; background-color: #f1efd8; display: flex; flex-flow: row wrap; align-items: center; }
.flavour__province-dropdown-toggle[data-newsletter-province-dropdown-toggle="on"] { border-radius: 20px 20px 0 0; }
.flavour__province-dropdown-arrow { width: 24px; }

.flavour__province-dropdown { display: none; position: absolute; width: 100%; margin-top: 47px; margin-bottom: 20px; top: -1px; left: 0; background-color: #f1efd8; border-radius: 0 0 20px 20px; padding-bottom: 20px; z-index: 3; font-weight: bold; }
.flavour__province-link { display: block; padding: 6px 24px; font-size: 15px; }
.flavour__province-link:hover { background-color: #dac3dc; }
[data-newsletter-province-selected="true"] { display: none; /* hide the selected province */ }



.flavour__submit-link { display: flex; flex-flow: row nowrap; align-items: center; justify-content: center; gap: 16px; widths: 60px; heights: auto; padding: 16px 0; border-radius: 20px; border: 1px solid var(--yellow); font-family: "Vacation-Heavy"; font-size: 26px; }
.flavour__submit-link[data-newsletter-submit-link="disabled"] { background: var(--violet-light); color: #731243; }
.flavour__submit-link[data-newsletter-submit-link="enabled"] { background: var(--orange); color: var(--yellow); }
.flavour__submit-link[data-newsletter-submit-link="enabled"]:hover .bounce-right-when-hovered-if-enabled,
.flavour__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;
}

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

.flavour__form-disclaimer-label { display: flex; margin-top: 12px; margin-bottom: 15px; position: relative; padding-left: 45px; cursor: pointer; font-size: 20px; }
.flavour__form-disclaimer-label--last { margin-bottom: 0; }
.flavour__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);*/ }
.flavour__form-disclaimer-checkbox-pretty { flex: 0 0 20px; margin: 0 14px 0 0; background-color: #f1efd8; position: absolute; top: 0; left: 0; height: 25px; width: 25px; }
.flavour__form-disclaimer-text { flex: 1; font-family: "Bookmania-Regular"; font-size: 13px; color: #f1efd8; line-height: 1.1; }



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


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

@media only screen and (max-width: 767px)
{
  .flavour__form-inner { gaps: 12px; }

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


  .flavour__disclainers-and-submit { justify-content: center; }
  .flavour__disclainers { flex-basis: 100%; }
  .flavour__submit { flex-basiss: 50%; }

}

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

  .flavour__adults-only { display: none; }

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

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

  .flavour__input { flex-basis: 100%; max-width: 100%; }
  .flavour__province-container { flex-basis: 100%; max-width: 100%; }



}

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





/* -------------------------------------------------------------------------- */
/* side panel ("INSTRUCTIONS" panel) for Grape Razz (added Nov 2024)
/* -------------------------------------------------------------------------- */

.side-panel { displays: none; position: fixed; width: 500px; /*max-width: 2000px;*/ height: calc(100% + 0px); top: 0; /*left: 0;*/ right: -500px; margin: auto; overflow: hidden;  z-index: 11; transition: transform .5s ease-in-out; transform: translateY(-0px); /* this "-1px" hack is needed for Firefox on Mac */ }

.side-panel__inner { height: 100%; display: flex; flex-flow: row nowrap; }

.side-panel__divider { flex: 0 0 40px; /*background: var(--violet);*/ text-align: right; transform: translateX(1px); /* needed to prevent appearance of 1px gap while animating */ z-index: 2; /*display: flex; flex-flow: row wrap; justify-content: flex-end;*/ /* last three rules are all needed just for Safari because it can't handle these SVGs properly otherwise (hack needed because Safari puts gap above image otherwise, unlike all other browsers); for now I've hidden this hack because, instead, I'm letting these images be the full 40px in Safari because it's the lesser of two evils here */ }

.side-panel__divider-image { max-width: 39.54px; /* needs to be exactly this number including the decimals for it to appear to be the same size as the "Just take me to your weed" squiggles */ vertical-align: bottom; }

@supports (-moz-appearance:none) {
  .side-panel__divider-image { max-width: 40px; } /* hack needed for Firefox on Windows only, because in that setup  Firefox can't animate this wihtout it looking janky unless I'm using a non-decimal-having pixel-width here */
}
body.user-is-on-safari {
  .side-panel__divider-image { max-width: 40px; } /* hack needed for Safari because the other hack involves flexbox etc which introduces its own problems like incorrect widths in Safari */
}

.side-panel__content { flex: 0 0 calc(100% - 40px); height: 100%; background: var(--violet); padding: 20px 50px 0 12px; /*transition: height .5s ease-in-out;*/ overflow-y: auto; z-index: 3; }

.side-panel__back-arrow { display: block; background: url(/img/side-panel__back-arrow.svg) no-repeat center center / contain; width: 80px; height: 60px; align-content: center; text-align: center; font-size: 12px; font-family: "Jaune-GrandeBlack"; line-height: 1.2; color: var(--violet); }

.side-panel__border-top { max-width: 100%; }

@media (any-hover: hover)
{
  .side-panel__back-arrow:hover { background-image: url(/img/side-panel__back-arrow-hovered.svg); }
}


.side-panel__heading { font-family: "Jaune-GrandeBlack"; /* font-weight: bold;*/ color: var(--yellow); font-size: 22px; line-height: 1.2; margin-bottom: 16px; }

.side-panel__paragraph { font-family: "Bookmania-Regular"; /* font-weight: bold;*/ color: var(--yellow); font-size: 16px; line-height: 1.2; margin-bottom: 50px; }


.side-panel__instructions-heading-image { margin: 20px 0; }

.side-panel__image { max-width: 100%; }


/* image-preload hack - PROPER image preloading as of 2024 [from https://stackoverflow.com/questions/1373142/how-to-preload-css-images/14390213#14390213] */
.side-panel::after{
   position:absolute; width:0; height:0; overflow:hidden; z-index:-1;
   content:url(/img/side-panel__back-arrow-hovered.svg) /*url(img2.png) url(img3.gif) url(img4.jpg)*/;
}

[data-side-panel="expanded"] { transform: translate(-100%, -0px); /* this "-1px" hack is needed for Firefox on Mac */ }
[data-side-panel="collapsed"] { transform: translate(0%, -0px); /* this "-1px" hack is needed for Firefox on Mac */ }

@media only screen and (max-width: 549px)
{
  .side-panel { width: calc(100vw - 50px); right: calc((100vw - 50px) * -1); }
  .side-panel__content { padding: 20px 38px 0 0;  }
}





/* -------------------------------------------------------------------------- */
/* hack (fix) for the squiggle lines SVG alignment problem that only exists in Safari
/* -------------------------------------------------------------------------- */

/* fix for the annoying Safari-only bug where the squiggle-lines don't left-align with the left edge of the page as they should (only affects Safari on Mac, and all browers on iPhone since they all get rendered by Safari, but this code fixes it for those non-Safari browsers in iPhones too so they must report as "Safari" in the userAgent) */
body.user-is-on-safari .nav__squiggle-image { height: 63px; }
body.user-is-on-safari .section-divider__image { height: 40px; }
body.user-is-on-safari .section-divider__image--line-only { height: 16px; }
body.user-is-on-safari .below-footer__squiggle-image { height: 87px; }





/* -------------------------------------------------------------------------- */
/* 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);
  }
}




















/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */

/* EVERYTHING BELOW THIS LINE IS NOT IN USE IN THIS PROJECT NECESSARILY */

/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */



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


/* footer code that I just moved here into the hidden area on mar-08-2022 */

 .join-and-social { justify-content: space-between; flex-wrap: wrap; }
    .col-first-last-email { flex: 0 0 380px !important; }
      .col-first-last-email input:not([type="checkbox"]) { floats: left; widths: 48.5%; }
      .col-first-last-email input.last-name { margin: 0 0 0 3%; }
      .col-first-last-email input.email-address { clear: left; margin-top: 12px; width: 100%; }
    .col-enter { flex: 0 0 160px !important; }
      .arrow-img,
      .enter-img { vertical-align: middle; }
      .arrow-img { width: 40px; }
      .enter-img { width: 70px; }
    .col-social { flex: 1 0 250px !important; text-align: right; padding-right: 20px; transform: translateX(-20px); /* todo: why is this needed? */ }
      .col-social div.social-icons a:not(:first-child) { margin-left: 6px; }
      .col-social a img { width: 28px !important; vertical-align: bottom; }
      .col-social div.privacy-policy p { line-height: 1.4; }
    .col-ness-in-flower { flex: 0 0 90px !important; }
      
    .col.align-bottom { position: relative; }
      .align-bottom-inner { position: absolute; bottom: 0; }
      .col-enter .align-bottom-inner { left: 8px; bottom: 12px; } /* needs to line up with middle of "Email" input box */
      .col-social .align-bottom-inner { right: 20px; } 

      div.privacy-policy { margin-top: 12px; font-size: 10px; }
      div.privacy-policy a { color: rgb(219, 195, 221); }

/* end footer code that I just moved here into the hidden area on mar-08-2022 */




.heading { font-size: 38px; font-weight: bold; margin-bottom: .3em; font-family: "Futura-ExtBol"; color: #1e1e1e }

.paragraph { font-size: 20px; line-height: 1.4; font-family: "ClarendonURW-Reg"; letter-spacing: -0.7px; margin-bottom: .5em; color: #1e1e1e }

/* buttons */

.button { display: inline-block; } /* this is the a tag, needed as a wrapper to prevent jitter when this buttom moves */

.button__content { display: inline-block; min-width: 234px; background-color: var(--orange); border: 3px solid #1e1e1e; color: white; padding: 16px 16px 26px; /* needs extra bottom padding because the font sits "low" in its line-height */ text-align: center;  box-shadow: var(--box-shadow); font-family: "PalmerLakePrint-Regular"; font-size: 50px; letter-spacing: .5px; line-height: .5; }

.button__content--flagship { min-width: 260px; }

.button__content--disabled { background-color: var(--orange-faded); box-shadow: none; cursor: default; }

/* hover over buttons, move the button__content a bit (sink it into its dropshadow) */
.button:not(.button--disabled):hover .button__content { animation: buttonhovered .1s forwards; }
.button:not(.button--disabled):active .button__content { background: #C1320E; }

/*.button--disabled:hover { cursor: default; }*/

@keyframes buttonhovered
{
  to { box-shadow: none; transform: translate(8px, 8px); }
}

.clickable:hover { cursor: pointer; }


/* text rectangle with the dropshadow (caption)*/
.text-rectangle { border: 3px solid #1e1e1e; padding: 0 12px 11px; color: #1e1e1e; font-family: "PalmerLakePrint-Regular"; background: white; font-size: 45px; line-height: 20px; box-shadow: 4px 4px 0px #1e1e1e; }

.text-rectangle__trademark { font-size: 22px; padding-left: 3px; vertical-align: top; } 

/* hello@bzam.com - style the "a" tag that is auto-generated by JS */
.hide-email-from-bots a,
.hide-email-from-bots a:hover,
.hide-email-from-bots a:active,
.hide-email-from-bots a:visited { color: #1e1e1e; text-decoration: underline; }







/* -------------------------------------------------------------------------- */
/* the sticky borders that "follow" you down the page
/* -------------------------------------------------------------------------- */

.sticky-border { left: -30px; /* to counter the body's 30px border (so that this still touches the left and right of the browser) */ height: 30px; width: calc(100% + 30px); /* to counter the body's 30px border (so that this still touches the left and right of the browser) */ position: fixed; background: url(/img/bg-dark.jpg?v=4); z-index: 10; }

.sticky-border--top { top: 0; }

.sticky-border--bottom { bottom: 0; }














/* -------------------------------------------------------------------------- */
/* the sticky nav and stamp ("AVAILABLE AT") container
/* -------------------------------------------------------------------------- */

.nav-and-stamp { position: fixed; top: 70px; width: 100%; margin: 0 auto; max-width: var(--page-container-width); borders:solid 1px red; padding: 0 40px; z-index: 20; display: flex; flex-flow: row wrap; justify-content: space-between; pointer-events: none; /* so we can click through this emptiness to the buttons below */ align-items: flex-start; /* so that the nav only takes up its required height (not 100% of the height), otherwise the strain cards are sometimes visible behind it */ }



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

.navs { flex: 0 0 200px; borders:solid 1px red; pointer-events: auto; /* to counter the "none" that we added to this thing's container (nav-and-stamp) */ position: relative; }

/* buttons (these sit "on top" of the strain cards) */

.nav__buttons { z-index: 20; position: relative; }

.nav__logo { width: 100%; display: block; /* fixes that weird problem of images having a tiny bit of space below */ }
.nav__image { width: 100%; display: block; /* fixes that weird problem of images having a tiny bit of space below */ border: 4px solid #1e1e1e; margin-top: -3px; }

.nav__button { display: block; border: 4px solid #1e1e1e; border-bottom: none; padding: 10px 0; text-align: center; font-family: "Futura-ExtBol"; font-size: 29px; background: url(/img/bg-light.jpg?v=4) top center no-repeat; color: #1e1e1e; }

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

.nav__button.is-active:not(.js-is-menu-button) { background: var(--orange); }
.nav__button.is-active:not(.js-is-menu-button):hover { color: #000; cursor: default; }

.nav__button--first { margin-top: -4px; }
.nav__button--last { border-bottom: 4px solid #1e1e1e; }



/* ---------------------------------- */
/* strain cards */
/* ---------------------------------- */

.nav__strain-cards { z-index: 0; position: absolute; top: 0; left: 0; height: 96%; min-heights: 110px; }

.nav__strain-card { top: 0; left: 0; width: 100%; height: 100%; borders: solid 1px red; background: url(/img/bg-light.jpg?v=4) top center no-repeat; z-index: -1; width: 200px; border: 4px solid #1e1e1e; display: flex; flex-flow: column nowrap; overflow: hidden; position: absolute; /* position necessary for z-index to work [z-index added by JS] */ }

.nav__strain-card:hover { cursor: pointer; }


.nav__strain-card-image { max-width: 100%; vertical-align: bottom; }

.nav__strain-card-text { flex: 1; text-align: center; border-top: 4px solid #1e1e1e; display: flex; flex-flow: column nowrap; align-items: space-around; justify-content: center; padding: 10px; user-select: none; /* so people can't highlight this text accidentally when clicking cards and they animate while mouse still held down */ position: relative; }

.nav__strain-card-heading { font-family: "Futura-ExtBol"; font-size: 27px; margin-bottom: 12px; z-index: 2; }
.nav__strain-card-subheading { font-family: "Futura-ExtBol"; font-size: 16px; line-height: 1.3; z-index: 2; }

.nav__strain-card-star { z-index: 1; position: absolute; top: 0; left: 0; width: 90%; height: 90%; margin-top: 5%; margin-left: 5%; display: none; /* hidden as of oct-29-2021 */ /* -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; rotation animation hidden as of oct-27-2021 */ }



/* ---------------------------------- */
/* stamp  */
/* ---------------------------------- */

.stamp { flex: 0 0 87px; }
.stamp__image { max-width: 100%; }


/* ---------------------------------- */
/* responsiveness */
/* ---------------------------------- */

@media only screen and (max-width: 1517px) /* 1440px max-width of site + 60px margin + 17px for scrollbar */
{
  .nav-and-stamp { width: calc(100vw - 77px); } /* 77 because we have 30px padding on each site (so 60px total) + 17px for scroll bar */
  body.user-is-on-mac .nav-and-stamp { width: calc(100vw - 60px); } /* 60 because we have 30px padding on each site (so 60px total) and ZERO for scrollbar because Mac scrollbar "hovers" over the content */
}






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

.hero { /*position: relative; 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; */ overflow: hidden; }



.hero__text-container { /*position: absolute; bottom: 0; right: 0; background: url(/img/hero__text-container-bg.jpg?v=1) center center/cover no-repeat; width: 800px;*/ padding: 14px; padding-bottom: 18px; /*border: 3px solid #1e1e1e; border-bottom: none; border-right: none;*/ text-align: center; background: url(/img/bg-light.jpg?v=4) center top repeat; }

.hero__text { font-family: "PalmerLakePrint-Regular"; font-size: 42px; line-height: .85; max-width: 1090px; margin: auto; }
.hero__text-fancy { font-family: "PalmerLakeScript-Regular"; color: var(--orange); }
.hero__text-coloured { color: var(--orange); }

.hero__bubble-bottom { width: 100%; }



@media only screen and (max-width: 1517px) /* 1440px max-width of site + 60px margin + 17px for scrollbar */
{
  /*.hero { height: calc(53.25vw); }*/ /* now that hero bg image takes the full width, we can set its height based on vw */
  /*.hero__bubble-text { font-size: 2.9vw; }*/
}

@media only screen and (max-width: 1200px)
{
  .hero__text { font-size: 3.5vw; }
}

@media only screen and (max-width: 900px)
{
  
  /*.hero__text { font-size: 4vw; }*/
}

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

/* all of the mobile (stacked) layouts are defined in main-responsive.css */




/* -------------------------------------------------------------------------- */
/* issue / strain section
/* -------------------------------------------------------------------------- */

.issue-and-strain { background: url(/img/bg-light.jpg?v=4) center top repeat; margin-top: -30px; padding-top: 30px; }
.issue-and-strain--last { padding-bottom: 66px; }

/* this is needed so we can have double-bgs */
.issue-and-strain-inner { background: url(/img/bg-hand.png?v=1) center 90%/cover repeat; padding: 20px 30px 22px; }




/* -------------------------------------------------------------------------- */
/* issue - "ISSUE 01 / VOL . 1"
/* -------------------------------------------------------------------------- */

.issue { text-align: center; }
.issue__text { margin-top: 40px; font-family: "ClarendonURW-Reg"; font-weight: bold; font-size: 32px; letter-spacing: .5px; }
.underline { margin: 22px auto 0; width: 200px; border-bottom: 3px solid #1e1e1e; }





/* -------------------------------------------------------------------------- */
/* individual strain info (everything from the image down to DIRECTIONS FOR PEAK)
/* -------------------------------------------------------------------------- */

.strain { max-width: 980px; margin: 94px auto 0; }

.strain__row { display: flex; flex-flow: row wrap; margin-bottom: 18px; }
.strain__row--1 { margin-bottom: 6px; }
.strain__row--2 { justify-content: space-between; }
.strain__row--3 { border: 3px solid #1e1e1e; justify-content: space-between; }
.strain__row--4 { margin-top: 30px; display: flex; justify-content: space-between; align-items: center; } /* only shows ONCE on the page, after the last strain */


/* these are the bits that sit on the left */
/* TODO: turn this into strain__col--image etc, like the footer, because that's more logical */
.strain__col--image,
.strain__col--where { flex: 0 0 34%; margin-right: 36px; }

/* these are the bits that sit on the right */
.strain__col--description,
.strain__col--flavour-and-terpenes { flex: 1; }

.strain__col--flavour-and-terpenes { display: flex; justify-content: flex-start; padding: 6px 0; }

.strain__image { width: 100%; border: 3px solid #1e1e1e; box-shadow: 8px 8px 0px #1e1e1e; }

.strain__name { margin-top: -16px; /* so strain name top-aligns with image*/ margin-bottom: 22px; margin-left: -4px; /* so it left-aligns with the highlight below */ font-family: "Futura-ExtBol"; font-size: 94px; line-height: .84; }
.strain__name--amherst-sour-diesel { color: #1e1e1e; }
.strain__name--nut-butter          { color: var(--orange); }
.strain__name--sour-og-cheese      { color: #7db29e; }
.strain__name--magic-melon         { color: #e2667e; }
.strain__name--banana-daze         { color: #1e1e1e; /*#d73439;*/ }
.strain__name--macslurry           { color: #a13169; }


/* strain-highlight is its own bem-block because it's used on multiple pages */
.strain-highlight { display: flex; align-items: center; }

.strain-highlight__text { display: inline-block; margin-right: 14px; padding: 4px 11px 9px; font-family: "Futura-ExtBol"; font-size: 33px; line-height: 1; }
.strain-highlight__text--amherst-sour-diesel { background-color: #ff8d24; }
.strain-highlight__text--nut-butter          { background-color: var(--yellow); }
.strain-highlight__text--sour-og-cheese      { background-color: #d06129; }
.strain-highlight__text--magic-melon         { background-color: #86b34e; }
.strain-highlight__text--banana-daze         { background-color: #c9b63d; }
.strain-highlight__text--macslurry           { background-color: #aebdc7; }

.strain-highlight__image { height: 44px; }


.strain__paragraph { margin-top: 30px; }



/* "WHERE TO BUY" row */

.strain__flavour,
.strain__terpenes { flex: 0 0 30%; borders:solid 1px red; }
.strain__col--where { display: flex; align-items: center; justify-content: center; } /* so we can center the "WHERE TO BUY" button */
.strain__flavour { margin-right: 8%; }
.strain__terpenes { flex: 0 0 40%; } /* extra wide so the "*Terpene result may" text doesn't go to three lines */

.strain__mini-heading { font-family: "AlternateGothicPro-No2"; font-size: 25px; }

.strain__list { margin-top: 4px; font-family: "Futura-ExtBol"; font-size: 32px; font-weight: bold; }
@media only screen and (min-width: 841px) and (max-width: 880px)
{
  .strain__list { font-size: 30px; } /* needed because the word "CARYOPHYLLENE" is too wide at this browser-width */
}
@media only screen and (min-width: 769px) and (max-width: 840px)
{
  .strain__list { font-size: 26px; }
}


.strain__disclaimer { font-family: "AlternateGothicPro-No2"; font-size: 12px; }
.strain__disclaimer--terpenes { margin-top: 6px; }




/* "TOTAL TERPENE PERCENTAGE" row */

.strain__col--total-terpene { flex: 0 0 19.1%; padding: 18px; display: flex; flex-flow: column; justify-content: center; /* vertically center its contents */ }
.strain__col--terpene-percentages { flex: 0 0 36.3%; border-left: 3px solid #1e1e1e; border-right: 3px solid #1e1e1e; padding: 6px 8px 6px 10px; }
.strain__col--lineage-and-appearance { flex: 1; }


.strain__total-terpene-heading { text-align: center; font-family:"AlternateGothicPro-No2"; font-size: 25px; line-height: 1; margin-bottom: 3px; }
.strain__total-terpene-text { text-align: center; font-family:"AlternateGothicPro-No2"; font-size: 90px; letter-spacing: -4px; }

.strain__percent-wrapper { height: 28px; width: 98%; margin: 3px 0 4px; position: relative; border: 1px solid #1e1e1e; }

.strain__percent-filled { height: 100%; }

.strain__percent-filled--amherst-sour-diesel-terp-1 { background-color: #911418; width: 0; /* JS animates this to its final width based on data-params in the HTML so edit strains-array.inc.php to change this */ }
.strain__percent-filled--amherst-sour-diesel-terp-2 { background-color: #c3ae1d; width: 0; }
.strain__percent-filled--amherst-sour-diesel-terp-3 { background-color: #d65f05; width: 0; }

.strain__percent-filled--nut-butter-terp-1 { background-color: var(--yellow); width: 0; }
.strain__percent-filled--nut-butter-terp-2 { background-color: var(--orange); width: 0; }
.strain__percent-filled--nut-butter-terp-3 { background-color: var(--teal); width: 0; }

.strain__percent-filled--sour-og-cheese-terp-1 { background-color: #d06129; width: 0; }
.strain__percent-filled--sour-og-cheese-terp-2 { background-color: #7db29e; width: 0; }
.strain__percent-filled--sour-og-cheese-terp-3 { background-color: #bebd47; width: 0; }

.strain__percent-filled--magic-melon-terp-1 { background-color: #e2667e; width: 0; }
.strain__percent-filled--magic-melon-terp-2 { background-color: #86b34e; width: 0; }
.strain__percent-filled--magic-melon-terp-3 { background-color: #d4d553; width: 0; }

.strain__percent-filled--banana-daze-terp-1 { background-color: #d73439; width: 0; }
.strain__percent-filled--banana-daze-terp-2 { background-color: #d67643; width: 0; }
.strain__percent-filled--banana-daze-terp-3 { background-color: #c9b63d; width: 0; }

.strain__percent-filled--macslurry-terp-1 { background-color: #a13169; width: 0; }
.strain__percent-filled--macslurry-terp-2 { background-color: #64a0a4; width: 0; }
.strain__percent-filled--macslurry-terp-3 { background-color: #aebdc7; width: 0; }




.strain__percent-number { position: absolute; top: 1px; right: 10px; }

.strain__lineage,
.strain__appearance { padding: 10px 22px; }

.strain__lineage { padding-bottom: 16px; } /* extra space under "MENDOBREATH F2 & THE WHITE" */
.strain__appearance { border-top: 3px solid #1e1e1e; }

.strain__lineage-and-appearance-text { margin-top: 3px; font-family: "Futura-ExtBol"; font-size: 22px; line-height: 1.2;  }






/* "HEADQUARTERED IN" row */

/* grid */
.strain__col--headquartered,
.strain__col--proper, 
.strain__col--inhale,
.strain__col--directions { text-align: center; padding: 0 4px; }

.strain__col--headquartered { flex: 0 0 17%; padding-left: 0; }
.strain__col--proper  { flex: 0 0 26%; }
.strain__col--inhale { flex: 0 0 31%; display: flex; justify-content: space-around; align-items: center; }
.strain__col--directions { flex: 0 0 24%; padding-right: 0; }

/* just the sun/inhale/hand section */
.strain__sun { height: 38px; }
.strain__inhale { height: 17px; }
.strain__hand { height: 38px; margin-top: -6px; }










/* -------------------------------------------------------------------------- */
/* team - "MEET THE STRAINS"
/* -------------------------------------------------------------------------- */


.team { padding-top: 80px; padding-bottom: 40px; overflow: hidden; /* so the stars, when spinning, can't cause page to become wider than it should be */ }
.team--strains-page { padding-left: 30px; padding-right: 30px; }

.team__heading { font-family: "Futura-ExtBol"; font-weight: bold; font-size: 32px; text-align: center; }

.team__grid { margin-top: 42px; display: flex; flex-flow: row wrap; justify-content: center; align-items: center; }

.team__panel { flex: 0 0 29%; min-width: 280px; margin: 30px 30px 60px; z-index: 3; /* so that these are always above dried flower section */ position: relative; /* so we can absolute-position the star */ height: 210px; /* needs hardcoded height so the stars are the same height and perfectly centered vertically */ /*border: 3px solid #1e1e1e; box-shadow: 8px 8px 0px #1e1e1e;*/ /*background: #ffffff;*/ display: flex; flex-flow: column nowrap; justify-content: flex-end; }

.team__panel-inner { display: inline-block; height: 100%; min-width: 100%; border: 3px solid #1e1e1e; background: #ffffff; box-shadow: var(--box-shadow); display: flex; flex-flow: column nowrap; justify-content: flex-end; }
.team__panel:hover .team__panel-inner { animation: buttonhovered .1s forwards; }




.team__strain-name { font-size: 54px; font-weight: bold; /*margin-bottom: 0.3em;*/ font-family: "Futura-ExtBol"; padding: 16px 18px 24px; flex: 1; /*border:solid 1px red;*/ display: flex; align-items: center; /* last two rules vertically-center the text always */ }
body.user-is-on-mac .team__strain-name { font-size: 52px; padding: 24px 18px 16px; }

.team__strain-details { font-size: 24px; font-weight: bold; margin: 0; font-family: "Futura-ExtBol"; border-top: 3px solid #1e1e1e; background: grey; padding: 4px 4px 8px; text-align: center; }
body.user-is-on-mac .team__strain-details { font-size: 22px; padding: 8px 4px 4px; }

.team__strain-details--amherst-sour-diesel { background-color: #efbd1e; }
.team__strain-details--nut-butter          { background-color: #ff5a38; }
.team__strain-details--magic-melon         { background-color: #f26681; }
.team__strain-details--banana-daze         { background-color: #ebdf01; }
.team__strain-details--sour-og-cheese      { background-color: #fa3549; }
.team__strain-details--macslurry           { background-color: #bed9f3; }



@media only screen and (max-width: 1500px)
{
  .team__panel { height: 14vw; /* needs hardcoded height so the stars are the same height and perfectly centered vertically; this way the height can shrink as browser gets naroower so vertical space between these remains same */ margin-bottom: 3vw; /* so margin reduces as browser width reduces */ }

  .team__strain-name { font-size: 3.5vw; }
  body.user-is-on-mac .team__strain-name { font-size: 3.4vw; }
}

@media only screen and (max-width: 1360px)
{
  .team__strain-name { font-size: 3.2vw; }
  body.user-is-on-mac .team__strain-name { font-size: 3.1vw; }
}

@media only screen and (max-width: 1240px)
{
  .team__panel { height: 170px; }
  .team__strain-name { font-size: 40px; }
  body.user-is-on-mac .team__strain-name { font-size: 38px; }
}

@media only screen and (max-width: 900px)
{
  .team__panel { margin: 20px; min-width: 270px; }
}

@media only screen and (max-width: 768px)
{
  .team__col { flex-basis: 26%; margin: 10px; }  

  .team__panel { /*margin-bottom: 30px;*/ /*height: 110px*/ }
}

@media only screen and (max-width: 420px)
{
  .team__panel { min-width: calc(100% - 14px); margin-top: 20px; margin-bottom: 20px; }
  .team__strain-name { font-size: 9.8vw; }
  body.user-is-on-mac .team__strain-name { font-size: 9.4vw; }
  .team__strain-details { font-size: 6vw; }
  body.user-is-on-mac .team__strain-details { font-size: 5.8vw; }
}

@media only screen and (max-width: 360px)
{
  .team__panel { height: 46vw; }
}







/* -------------------------------------------------------------------------- */
/* "DRIED FLOWER / VAPES" */
/* -------------------------------------------------------------------------- */

.flower { position: relative; display: flex; background: url(/img/flower__bg.jpg?v=3) center top/cover no-repeat; padding: 8% 76px 6%; height: calc( var(--page-container-width) * .648); }

.flower__grid { display: flex; }

.flower__panel { display: flex; borders:solid 1px red; }
.flower__panel--left   { flex: 1; flex-flow: column nowrap; z-index: 2; }
.flower__panel--middle { flex: 0 0 30%; margin: 0 70px 0 30px; flex-flow: column nowrap; }
.flower__panel--right  { flex: 1; flex-flow: column nowrap; z-index: 2; }


.flower__heading { margin-bottom: 18px; }
.flower__text-rectangle { display: inline-block; align-self: flex-start; /* so it's not 100% wide */ margin-bottom: 24px; } /* also see global rules "text-rectangle" */

.flower__paragraph { margin-bottom: 30px; }
.flower__available-in { font-family: "PalmerLakePrint-Regular"; font-size: 44px; line-height: .66; }

.flower__button { margin: 6px 0 0 92px; }

/* middle col content */
.flower__image { max-width: 182%; margin-left: -40%; /* so it spills out of its container evenly on both sides */ align-self: center; margin-top: 140px; z-index: 2; /* only needed for the float experiment, so todo: remove this pre-launch */ }


.flower__image--tablet { display: none; }
.flower__image-mobile { display: none; }


@media only screen and (max-width: 1500px)
{
  .flower { height: auto; min-height: calc( (100vw - 60px) * .648 ); padding: 8% 76px 7%; }

  .flower__panel--middle { flex: 0 0 40%; margin: 0 20px 0 20px; }

  .flower__image--desktop { display: none; }
  .flower__image--tablet { display: inline; max-width: 110%; margin-top: 10vw; margin-left: -6%; }

}

@media only screen and (max-width: 1400px)
{
  .flower { padding-bottom: 9%; /* make sure "AVAILABLE IN 1G CARTRIDGES" doesn't get too close to the scissors and dotted-line */ }

  /*.flower__panel--middle { flex-basis: 38%; }*/
  /*.flower__image { max-width: 230%; margin-top: 120px; }*/

}

/*@media only screen and (max-width: 1310px)
{
  .flower { height: calc( (100vw - 60px) * .748 ) }
  .flower__panel--middle { flex-basis: 38%; }
  .flower__image { max-width: 185%; margin-top: 150px }
}*/

@media only screen and (max-width: 1300px)
{
  /* we need more width now */
  /*.flower { padding: 5% 30px 5%; }
  .flower__panel--middle { flex-basis: 36%; margin: 0 60px; }
  .flower__image { max-width: 155%; margin-top: 140px; margin-left: 20%; }*/
  .flower__image--tablet { margin-top: 14vw; }
}

@media only screen and (max-width: 1200px)
{
  .flower { displays: none; background: url(/img/bg-hand.png?v=1) center 90%/cover repeat; padding: 0; height: auto; }

  .flower__grid { flex-flow: row wrap; }

  .flower__panel { flex: 0 0 100%; position: relative; }
  .flower__panel--left { flex: 0 0 100%; background: url(/img/mobile/flower__flower-bg.jpg) center center/cover; }
  .flower__panel--middle { display: none; }
  .flower__panel--right { flex: 0 0 100%; background: url(/img/mobile/flower__vapes-bg.jpg) center center/cover; }

  .flower__panel-inner { max-widths: 600px; margin: 10px auto 110px; padding: 70px 200px 100px 70px; }

  .flower__text-rectangle { display: inline-block; }

  .flower__image-mobile { display: inline; max-width: 50%; position: absolute; right: 0; bottom: 20px; }
  .flower__image-mobile--flower { max-height: 330px; }
  .flower__image-mobile--vapes { max-height: 460px; }

}


@media only screen and (max-width: 1000px)
{
  .flower__panel-inner { padding-right: 22vw; }
  .flower__panel-inner--flower { margin-bottom: 22vw; }
  .flower__image-mobile--flower { max-height: 380px; }
}

@media only screen and (max-width: 768px)
{
  .flower__panel-inner--flower { margin-bottom: 15vw; }
  .flower__panel-inner--vapes { margin-bottom: 10vw; }
  .flower__image-mobile--flower { max-height: 44vw; }
  .flower__image-mobile--vapes { max-height: 430px; }
}

@media only screen and (max-width: 660px)
{
  .flower__panel-inner { padding-top: 40px; padding-right: 20vw; }
  .flower__panel-inner--vapes { padding-right: 26vw; }
  .flower__image-mobile--vapes { max-height: 78vw; }
}

@media only screen and (max-width: 500px)
{
  .flower__panel-inner { padding-left: 30px; }
  .flower__panel-inner--flower { padding-right: 30px; margin-bottom: 18vw; }
}

@media only screen and (max-width: 440px)
{
  .flower__panel-inner--flower { margin-bottom: 12vw; }
}







/* "SEE HOW THE MAGIC HAPPENS" */

.magic { position: absolute; width: 200px; right: 98px; margin-top: -200px; display: flex; z-index: 2; }

.magic__border { flex: 0 0 3px; margin-right: 40px; display: flex; flex-direction: column; borders:solid 1px red; }
.magic__border-scissors { flex: 0 0 38px; width: 20px; margin-left: -10px; margin-right: 5px; height: 40px; borders:solid 1px red; }
.magic__border-scissors-image { width: 36px; margin-left: -10px; vertical-align: baseline; transform: rotate(80deg); }
.magic__border-dots { flex: 1; width: 3px; background: url(/img/magic__border-dots.png) repeat-y; display: flex; borders:solid 1px red; }


.magic__content { flex: 1; margin-top: 20px; }


.magic__see-how { width: 97%; margin-bottom: 14px; border: none; box-shadow: none; }

.magic__button { display: inline-block; margin-bottom: 46px; }
.magic__button--last { margin-bottom: 20px; }

.magic__image { width: 100%; max-width: 152px; border: 2px solid #1e1e1e; box-shadow: var(--box-shadow); cursor: pointer; }

.magic__text { display: inline-block; width: 100%; margin: 8px 0 0; text-align: center; font-family: "PalmerLakePrint-Regular"; font-size: 45px; line-height: .5; color: #1e1e1e; }

/* hover effects */
.magic__button:hover .magic__image { animation: buttonhovered .1s forwards; }
.magic__button:hover .magic__text { color: var(--orange); }


/* "OUR MISSION" and "CULTIVATION & PROCESSING" */

.mission-and-cultivation { position: relative; padding: 98px 106px 92px 106px; background: url(/img/bg-light.jpg?v=4) center top repeat; }

.about { display: flex; flex-flow: row wrap; width: 76%; margin-bottom: 16px; }
.about--cultivation { margin-bottom: 16px; }

.about__left { flex: 0 0 52%; margin-right: 20px; }
.about__left--cultivation { margin-bottom: 20px; /* prevent taco image (that sits below this button) from getting too close when we responsive-ise */ display: flex; flex-flow: column; justify-content: center; } 
/*.about__left--cultivation { flex: 0 0 48%; margin-right: 0; display: flex; }*/

.about__right { flex: 1; }
.about__right--cultivation { display: flex; }
/*.about__right--cultivation { flex: 1 0 50%; text-align: right; display: flex; flex-flow: column; justify-content: center; }*/

.about__heading {  }
.about__heading--cultivation {  }

.about__button { margin-top: 24px; }

.about__image { max-width: 100%; align-self: center; /* so we can vertically-center the images without stretching them */ }
.about__image--cultivation { max-width: 120%; margin-left: -40px; }





/* -------------------------------------------------------------------------- */
/* "WHERE TO BUY" ; also some of this is shared with CONTACT page (the where__province stuff); maybe split that up
/* -------------------------------------------------------------------------- */

.where { position: relative; padding: 102px 60px 56px; background: url('/img/where__bg.jpg?v=1') center top/cover no-repeat; text-align: center; }

.where__heading { max-width: 42%; margin-bottom: 24px; }

.where__paragraph { max-width: 65%; margin-left: auto; margin-right: auto; }

.where__province { margin: 35px auto; text-align: left; width: 100%; max-width: 65%; }

.where__province-inner { position: relative; flex: 1; color: white; }




/*.province a { color: rgb(156, 29, 100); }*/
/*.province .btn-province-dropdown img { width: 20px; }*/


.where__province-dropdown-trigger { display: block; padding: 6px 26px 12px; background-color: white; border: 3px solid #1e1e1e; font-family: "PalmerLakePrint-Regular"; font-size: 48px; color: var(--orange); }

.where__province-dropdown-arrow { width: 102px; height: 72px; background: url(/img/where__province-dropdown-arrow.svg?v=1) center center/29% no-repeat var(--orange); box-shadow: var(--box-shadow); position: absolute; top: 0; right: 0; border: 3px solid #1e1e1e; z-index: 4; }

.where__province-dropdown { display: none; position: absolute; width: calc(100% - 68px); width: 100%; margin-top: 66px; margin-bottom: 20px; top: 0; left: 0; background-color: white; border: 3px solid #1e1e1e; border-top: none; /* so it's always above MM / DD / YYYY even if they're shaking */ z-index: 3; }

@media only screen and (max-width: 768px)
{
  .where__province-dropdown { margin-top: 48px; }
}

.where__individual-province { display: block; padding: 0 26px 8px; }

.where__unavailable { opacity: .3; position: relative; }
.where__unavailable:after { border-top: 2px solid var(--orange); position: absolute; content: ""; right: 0; top: 60%; left: 0; display: inline; }

@media only screen and (max-width: 410px)
{
  /* strikethrough - the makeshift strikethrough doesn't work when NEWF & LAB takes two lines so just remove it and reduce opacity further for other provinces as indicator they're unavailable */
  .where__unavailable { opacity: .2; }
  .where__unavailable:after { border: none; }
}

@media only screen and (max-width: 370px)
{
  .where__choose-a { display: none; }
}

.where__individual-province:hover { cursor: default; }
.where__individual-province--is-available:hover { background-color: var(--orange); color: white; cursor: pointer; }


/* BC popup "TO FIND BZAM NEAR YOU EMAIL"; used on multiple pages (homepage and buy page) so it's not in the ".where" BEM block */
.find-in-bc-infobox { display: none; width: 450px; max-width: 70vw; text-align: center; font-size: 36px; line-height: .7; background: var(--orange); color: white; padding: 4px 8px 12px 8px; top: 54px; position: absolute; left: 90px; box-shadow: 0 0 6px 0px rgb(0 0 0 / 70%); }

@media only screen and (max-width: 1140px)
{
  .find-in-bc-infobox { max-width: calc(72% - 20px); }
}

@media only screen and (max-width: 768px)
{
  .find-in-bc-infobox { font-size: 32px; max-width: calc(100vw - 176px); }
  .find-in-bc-infobox--buy-page { font-size: 36px; width: 434px; max-width: calc(100vw - 194px); }
}

@media only screen and (max-width: 400px)
{
  .find-in-bc-infobox--buy-page { font-size: 29px; }
}

/*
.where__province-dropdown a[href="#"] { text-decoration: line-through; color: rgba(156, 29, 100, .3); }
*/





/* -------------------------------------------------------------------------- */
/* "Visit Our SECRET HEADQUARTERS"
/* -------------------------------------------------------------------------- */

.visit { position: relative; padding: 140px 60px 110px; background: url(/img/visit__bg.jpg?v=2) center top/cover no-repeat; text-align: center; /*height: 200px; height: calc(var(--page-container-width) * .4); don't need this weird height-trick now that we're not absolutely-positioning things */ }

.visit__content { /*position: absolute; left: 59.3%; width: 32%; */ max-width: 78%; margin: auto; }

.visit__heading { margin-bottom: 10px; transform: translateX(-4.7%); /* so that SECRET HEADQUARTERS is centered in the browser window */ }

.visit__paragraph { margin-bottom: 30px; color: #1e1e1e; }

.visit__address { font-family: "Futura-ExtBol"; font-size: 22px; line-height: 1.4; color: #1e1e1e; margin-bottom: 30px; }

.visit__flagship { /*position: absolute; bottom: 85px; width: calc(100% - 120px);*/ }




@media only screen and (max-width: 1280px)
{
  /*.visit { height: 40vw; }*/ /* flower bg image is 40% as tall as wide, and now that it takes the full width, we can set its height based on vw */
}


/* show the mobile "Visit Our Other SECRED HEADQUARTERS" on the mobile (stacked) layout */
.visit__visit-our--mobile-only { display: none; }
@media only screen and (max-width: 768px)
{
  .visit__heading { transform: translateX(0); /* so that SECRET HEADQUARTERS is centered in the browser window */ }
  .visit__visit-our--desktop-only { display: none; }
  .visit__visit-our--mobile-only { display: unset; max-width: 540px; }
}




/* -------------------------------------------------------------------------- */
/* scissors and line
/* -------------------------------------------------------------------------- */

.dotted-divider { background: url(/img/dotted-divider__scissors.svg?v=1) left/38px no-repeat; padding: 50px 0; }

.dotted-divider__line { margin-left: 48px; width: calc(100% - 48px); height: 2px; background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='white' stroke-width='4' stroke-dasharray='4%2c 16' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e"); /* this dotted bg is from: https://kovart.github.io/dashed-border-generator/ */ }





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

.footer { border: var(--footer-border-style); }

.footer__row { borders:solid 1px red; display: flex; flex-flow: row wrap; align-items: center }
.footer__row--2 { border-top: var(--footer-border-style); }

/* columns */
.footer__col { borders:solid 1px red; }

/* columns in row 1 */
.footer__col--available { flex: 0 0 21.6%; padding: 12px 1.2% 8px; display: flex; flex-flow: row wrap; }
.footer__col--looking { flex: 1; display: flex; flex-flow: row wrap; border-left: var(--footer-border-style); }

/* columns in row 2 */
.footer__col--bzam { flex: 0 0 21.6%; }
.footer__col--please { flex: 0 0 30%; padding: 3px 25px 2px; }
.footer__col--communicate { flex: 1; padding: 3px 25px 2px 0; display: flex; flex-flow: row wrap; }


/* footer - fonts */
.footer__heading, 
.footer__paragraph { font-size: 17px; letter-spacing: 1px; color: #f8f7f1; }

.footer__heading { font-family: "KorolevRoughCompressed-Bold"; line-height: 1; margin-bottom: 6px; }
.footer__heading--please,
.footer__heading--communicate { margin-bottom: 2px; }
.footer__paragraph { font-family: "KorolevRoughCompressed-Light"; line-height: 1.1; text-transform: uppercase; margin-bottom: 6px; }

.footer__link { color: white; font-weight: bold; }
.footer__link--instagram,
.footer__link--facebook { color: #00AAE2; }
.footer__link--ness { color: #B52372; }
.footer__link--table-top { color: #EEBC1B; }
.footer__link--email { color: #FF5B35; } /* SECRET CODE: HELLO@BZAM.COM */
.footer__link--privacy,
.footer__link--terms { font-weight: normal; }



/* "AVAILABLE ON" section */
.footer__available-left { flex: 0 0 30%; margin-right: 6%; }
.footer__available-right { flex: 1; }
.footer__instagram { width: 100%; }
.footer__facebook { width: 92%; margin: 12px 0 0 14px; }

/* "LOOKING FOR SOMETHING A LITTLE DIFFERENT?" section */
.footer__looking { flex: 0 0 100%; margin: 14px 0; text-align: center; }
.footer__looking-image { max-width: 67%; }

.footer__other-brand { display: flex; flex-flow: row wrap; }
.footer__other-brand--ness { flex: 0 0 53%; border-right: var(--footer-border-style); }
.footer__other-brand--table-top { flex: 0 0 47%; }

.footer__other-brand-left { flex: 0 0 27.2%; padding: 6px 0 0 3.4%; }
.footer__other-brand-left--table-top { flex: 0 0 37%; padding: 16px 10px 10px 29px; /* trying to make Table Top logo roughly same size as ness, but it's squatter, so centering it vertically compared to ness */ }
.footer__other-brand-right { flex: 1; padding: 0px 28px 10px 18px; }
.footer__other-brand-right--table-top { padding-rights: 190px }

.footer__other-brand-logo { width: 100%; }
.footer__other-brand-logo--ness { width: 100%; margin-top: -20px; /* ness logo has lots of whitespace so need to shove it upwards to top-align properly */ } 


/* row 2 */
.footer__bzam { width: 100%; margin: -1px 0 -5px -2px; /* this weirdness is needed to prevent any blank space round this image (so this image "touches" [actually overlaps] the borders */ }


/* "COMMUNICATE ELECTRONICALLY!" */
.footer__communicate-left { flex: 0 0 86%; padding-right: 20px; }
.footer__communicate-right { flex: 1; }
.footer__satellite { width: 100%; margin-top: -56px; }









/* -------------------------------------------------------------------------- */
/* hacks for Mac computers / Apple phone and tablets
/* -------------------------------------------------------------------------- */

body.user-is-on-mac .nav__button { padding: 12px 0 6px; }

body.user-is-on-mac .strain-highlight__text { padding: 9px 11px 2px; } /* on mac, we basically REVERSE the top and bottom padding to make "INDICA 20-26% THC" centered vertically in its highlight, because for some reason, on Windows (in all browsers), this text sits really "high" in its line-height, and on Mac (in all browsers) it does the opposite */

/* desktop-only rules */
@media only screen and (min-width: 769px)
{
  body.user-is-on-mac .strain__name { margin-top: 2px; margin-bottom: 14px; } /* on mac, "Nut Butter" needs to be pushed down to line up vertically with the strain image (opposite of PC which needs it pushed UP a bunch ) */
}










/* -------------------------------------------------------------------------- */
/* our grow page
/* -------------------------------------------------------------------------- */

/* needs double-containers because there's two stacked bg images  */
.grow-container { background: url(/img/bg-light.jpg?v=4) center top repeat; }
.grow-container-inner { position: relative; background: url(/img/bg-hand.png?v=2) center -40px/contain repeat-y; padding: 20px 0 1px; }

.grow { margin: 84px auto 110px; max-width: 970px; padding: 0 30px; }

.grow__heading { text-align: center; letter-spacing: -0.5px; }

.grow__status { margin: 26px auto 68px; display: flex; flex-flow: row wrap; border: 1px solid #1e1e1e; width: 310px; height: 50px; }
.grow__status--indoor { width: 400px; }

.grow__status-left { flex: 0 0 100px; border-right: 1px solid #1e1e1e; display: flex; align-items: center; justify-content: center; }
.grow__status-right { flex: 1; display: flex; align-items: center; justify-content: center; }

.grow__status-left-text { font-family: "AlternateGothicPro-No2"; font-size: 25px; }
.grow__status-right-text { font-size: 14px; letter-spacing: 1px; line-height: 1.4; }

.grow__double-image-container { position: relative; margin-bottom: 18px; }
.grow__single-image-container { position: relative; margin-bottom: 54px; }

.grow__image { max-width: 100%; }

.grow__location { position: absolute; } /* see global rules for "text-rectangle" */
.grow__location--top-left { top: 25px; left: 25px; }
.grow__location--top-right { top: 25px; right: 25px; }
.grow__location--bottom-left { bottom: 25px; left: 25px; }
.grow__location--bottom-right { bottom: 25px; right: 25px; }

.grow__paragraph { margin-top: 50px; text-align: center; }

/* only used around "PROCESSING HUB", so we can have the "INHALE TO ACTIVATE" bg */
.grow-wrapper-with-bg-inhale { background: url(/img/bg-inhale.png) left 15%/90% no-repeat; }








/* -------------------------------------------------------------------------- */
/* mission page
/* -------------------------------------------------------------------------- */

/*

  in mission.css 

*/





/* -------------------------------------------------------------------------- */
/* legal modal
/* -------------------------------------------------------------------------- */

.legal-modal { display: none; position: fixed; top: 0; bottom: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,.9); z-index: 1000; }

.legal-modal.is-showing { display: block; }

.legal-modal__content { position: fixed; left: 50%; margin-left: -600px; top: 10%; width: 90%; max-width: 1200px; height: 80%; background: url(/img/bg-dark.jpg?v=4) top center repeat #1e1e1e; overflow-ys: scroll; z-index: 1001; }

.legal-modal__text { width: 100%; height: 100%; padding: 40px; overflow-y: scroll; }

.modal-close { position: absolute; top: -50px; right: 0; background: url(/img/bg-light.jpg?v=4) center top var(--bg-light-color); width: 42px; height: 42px; border-radiuss: 21px; text-align: center; margin: 0; font-weight: bold; font-size: 22px; display: flex; align-items: center; justify-content: center; }

.modal-close { font-family: "KorolevRoughCompressed-Bold"; font-size: 37px; color: #1e1e1e; } /* todo: bemify this; was too short on time */

.legal-modal__heading,
.legal-modal p,
.legal-modal li { color: white; margin-bottom: 18px; letter-spacing: 1px; } 

.legal-modal__heading { font-family: "AlternateGothicPro-No2"; font-size: 32px; line-height: 1.2; }
.legal-modal p { font-family: "Special Elite"; font-size: 16px; line-height: 1.4; }
.legal-modal li { font-family: "Special Elite"; font-size: 16px; line-height: 1.4; list-style-type: disc; margin-left: 20px; margin-bottom: 8px; }
.legal-modal li:last-child { margin-bottom: 18px; } 
.legal-modal strong { font-weight: bold; }

/* above I'm cheating, not using BEM here with this "p" tag, because it'd be SO many <p> tags with class="legal-modal__paragraph  paragraph" otherwise */





/* -------------------------------------------------------------------------- */
/* contest page (BZAM Pins Official Contest Rules)
/* -------------------------------------------------------------------------- */

.contest { padding: 40px; }

.contest__heading,
.contest p { color: white; margin-bottom: 18px; line-height: 1.2; letter-spacing: 1px; } 
/* above I'm cheating, not using BEM here with this "p" tag, because it'd be SO many <p> tags with class="contest__paragraph  paragraph" otherwise */

.contest__heading { font-family: "AlternateGothicPro-No2"; font-size: 32px; }
.contest p { font-family: "Special Elite"; font-size: 16px; line-height: 1.4; }
.contest strong { font-weight: bold; }





}