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

.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(--violet); }
body:not(.homepage) .nav__special-message { visibility: hidden; height: 0; } /* we usae visibility hidden so this still takes up space */

.nav__special-message-link { 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: 12px 0; borders: solid 1px red; font-size: 32px; transition: transform .3s ease-out; }
.nav__link--return-to-main-nav { margin: 0 0 4px 0; position: relative; }

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

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


.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: 940px)
{
  .nav__special-message { visibility: hidden; height: 0; } /* we usae visibility hidden so this still takes up space */
}

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

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

@media only screen and (max-width: 767px)
{
  .whatcha { width: 74px; }
  .explore-your-ness { width: 74px; }
}



@media only screen and (max-width: 600px)
{
  .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; */ overflow: hidden; height: 56vw; }

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

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

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


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

@media only screen and (max-width: 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 { height: 110vw; }
  .hero__video { min-width: 300%; min-height: 300%; margin-left: -106%; /* products look more centered if we move a bit further left */ margin-top: -140%; }
}




/* -------------------------------------------------------------------------- */
/* 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: 10%; /*transform: translate(-50%, 0);*/ font-family: 'Jaunev0.6-GrandeBold'; color: var(--yellow); font-size: clamp(12px, 1vw, 20px); letter-spacing: 1px; z-index: 2 }
.strain-carousel__image { position: absolute; width: 74%; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2}

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

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

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

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

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

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

[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 */ }


  /* 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 clamp(90px, 12vw, 130px); padding: 0 var(--page-content-horizontal-padding); background: url(/img/new__bg.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__learn-more-button {  }
.new__learn-more-button:hover { cursor: pointer; }

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

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


@media only screen and (max-width: 1500px)
{
  .new { margin: clamp(46px, calc(3vw + 20px), 100px) 0 clamp(100px, 9vw, 120px); }
}

@media only screen and (max-width: 767px)
{
  .new { margin: 40px 0 60px; background: url(/img/new__bg-mobile.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__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 { background: 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; }

.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 { border: solid 1px yellow; flex: 0 0 100%; width: 100%; paddings: 20px; position: relative; overflow: hidden; }
.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__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-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: 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; }
}

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

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




/* -------------------------------------------------------------------------- */
/* 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-inner { position: relative; display: flex; flex-flow: row wrap; justify-content: space-between; margin-bottom: 20px; }

.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__submit-link { position: absolute; display: block; bottom: 0; right: 10px; transform: translateY(-23px); width: 60px; height: auto; }
.footer__submit-text { display: none; }

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

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

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

/* 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-inner { 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: 8px 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 { vertical-align: middle; display: inline-block; }
.below-footer__logo--bzam { width: 110px; vertical-align: middle; margin: 0 4px 0 12px; /* needs strange margins to appear centered */ }
.below-footer__logo--table-top { width: 140px; vertical-align: middle; margin: 0 8px; }

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








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



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

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





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

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

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


/* all non-flex rules */

.strain-hero { position: relative; 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: 14px; }
.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; }


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

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

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

.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__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: 40px; padding-bottom: 0; }
.strain-info__details--products { display: flex; flex-flow: row wrap; }
.strain-info__details--multi-pack-logo { text-align: center; }
/*.strain-info__details--multi-pack-products { display: flex; }*/

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

/* no BEM for this because used in mutliple places and called via PHP */
.strain-info__details .thc-subtext { font-family: "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: center; 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; }


@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--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) + 22%); }
.compare__strain-name-image--key-lime { max-width: calc(var(--compare-strain-name-image-base-width) + 22%); }
.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__jackfruit-comes-in { display: none; color: var(--violet); max-width: calc(var(--compare-strain-name-image-base-width) + 22%); }
.compare__jackfruit-comes-in-text-top { text-align: center; font-family: "Vacation-Heavy"; font-size: 19px; }
.compare__jackfruit-comes-in-text-bottom { margin-top: 8px; padding: 11px 0 10px 8px; background: url(/img/compare__jackfruit-comes-in-text-bottom-bg.svg) no-repeat center center / contain; font-family: "Bookmania-Bold"; font-size: 11px; text-align: left; }

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

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

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


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


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


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

.compare__col-popup-info { 
    position: absolute;
    /*bottom: 100%;*/
    left: 0;
    /*margin-bottom: 12px;*/
    margin-top: 12px;
    background-color: var(--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__jackfruit-comes-in-text-top { font-size: 17px; }
  .compare__jackfruit-comes-in-text-bottom { padding-top: 10px; font-size: 10px; }
  .compare__slide-out { width: 200px; }
  .compare__slide-out[data-compare-slide-out="is-hidden"] {/* width: 200px !important;*/ /* this must match or be less than compare__left always */ /*transition: none !important;*/ }
}

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

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

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

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

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

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

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

  .compare__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--vaporizers { background-color: var(--violet-light); margin-top: calc( ( var(--section-divider-height) - 1px ) * -1); }
.products--pre-rolls { 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); }
.products__heading-container--pre-rolls::before { background-image: url(/img/products__pre-rolls-bg.jpg); }

.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__top { padding: 180px var(--page-content-horizontal-padding) 140px; background: url(/img/stockists__bg.jpg?v=2) no-repeat top right / contain; }
.stockists__bottom { padding: 40px 0 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__heading { max-height: 60px; margin-bottom: 60px; height: 100%; }

.stockists__paragraph { max-width: 560px; font-family: "Bookmania-Regular"; color: var(--yellow); font-size: 18px; line-height: 1.3; margin-bottom: 60px; }


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

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


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

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

  .stockists__heading { margin-bottom: 24px; }
  .stockists__paragraph { margin-bottom: 50px; }
}






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





/* -------------------------------------------------------------------------- */
/* 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__main-image { width: 100%; vertical-align: bottom; }

.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__main-image { width: 110%; margin-left: -5%; }
  /*.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; }







}