/** Shopify CDN: Minification failed

Line 1108:106 Expected identifier but found whitespace
Line 1108:107 Unexpected "1px"
Line 1108:118 Unexpected "{"
Line 1108:126 Expected ":"

**/
/*
* {border:  1px solid #e2e2e2;}
*/




     
:root {
    --a-color-test:         orange;
    --a-color-black:        #000000;
    --a-color-white:        #FFFFFF;
    --a-color-gray1:        #F8F8F8;
    --a-color-black-light:  #282828;;
    --a-color-f2:           #F2F2F2;
    --a-color-e8:           #E8E8E8;
    --a-color-e2:           #E2E2E2;
    --a-color-d8:           #D8D8D8;
    --a-color-d2:           #D2D2D2;
    --a-color-c8:           #C8C8C8;
    --a-color-c2:           #C2C2C2;                    
    --a-color-capsene:      #35A117;        /*    --a-color-capsene: #5D9E38;*/
    --a-color-capsene-5:    #F7FAF5;
    --a-color-saltlick:     #343741;
    --a-color-saltlick-5:   #F5F5F5;
    --a-color-bloozberry:   #83245F;
    --a-color-bloozberry-5: #F9F4F7;
    --a-color-chillwhite:   #325D7B;
    --a-color-chillwhite-5: #F5F7F8;
    --a-color-quino:        #F9C20A;
    --a-color-quino-5:      #FFFCF3;
    --a-color-dula:         #766AAB;
    --a-color-dula-5:       #F8F7FB;
    --a-color-sniffing:     #525252; 
    --a-color-bundle:       #525252;
    --a-color-giftcard:     #7A2621;
    --a-color-vday:         #DE2E64; 
    --a-color-BFCM24:       #7A2621;  /* #9F0902 or #7A2621 or #cc0c39 or# #601C19  Color used on BFCM or XMAS 24     */
    --a-color-BFCM24-A:     #165389;      /* #165389 Color used on BFCM or XMAS 24    */  
    --a-color-BFCM24-B:     #F2F2F2;      /* #E98403 Color used on BFCM or XMAS 24    */  
    --a-gap1:               10px;   
    --a-border-line-thin:   1px solid #7F7F7F; 
    --a-border-line-xthin:  1px solid #B2B2B2; 
    --a-type-p-small:       0.85rem/1.5 'Roboto Mono', sans-serif;
    --a-type-p-xsmall:      0.75rem/1.5 'Roboto Mono', sans-serif;
    --a-type-emphatic:      6rem/1.25 'Roboto Mono', sans-serif #E2E2E2;
    --a-display-hide:       none;
    --a-display-show:       block;
    --a-overlay-dark:       linear-gradient( rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15) ); 
  
  /* --a-color-bundle:       #828282; */

    /* SHOPIFY SHOULD PROVIDE THESE WITH THEIR THEME */
        -webkit-font-smoothing: antialiased;
        -webkit-text-size-adjust: 100%;
}


html { 
  font-size:  16px;
  font-family: 'Roboto Mono', 'Helvetica';
  scroll-behavior: smooth;
 
}

 @media only screen and (max-width: 900px) {
      html {
        font-size: 16px !important;
          }
      body {
        font-size: 16px !important;
      }
    }


body {
  margin: 0 auto; 
  padding:  0 0 0 0; 
  width:  100%; 
  background-color: white !important;
  
}

a {
    color: unset ;
    text-decoration:  unset;
}

a:hover {
    text-decoration:  none;
}





/* ===============================      ATOMS       =============================== */
/* 
    TYPEFACES / FONTS
    TYPEFACES / ELEMENTS
    TYPEFACES / CUSTOM
    BUTTONS  
*/



/* -------------------------------  TYPEFACES / FONTS  -------------------------------*/

      
@font-face {
    font-family: "RobotoMono-Light";
    src: 
        url ("RobotoMono-Light.woff2") format("woff2");
}

@font-face {
    font-family: "RobotoMono-Medium";
    src: 
        url ("RobotoMono-Medium.woff2") format("woff2");
}

@font-face {
    font-family: "RobotoMono-Regular";
    src: 
        url ("RobotoMono-Regular.woff2") format("woff2"),
        url ("RobotoMono-Regular.ttf") format("ttf");
}

@font-face {
    font-family: "RobotoMono-SemiBold";
    src: 
        url ("RobotoMono-SemiBold.woff2") format("woff2");
}

@font-face {
    font-family: "RobotoMono-Bold";
    src: 
        url ("RobotoMono-Bold.woff2") format("woff2");
}
      
@font-face {
    font-family: "BrandonText-Light"; 
    src: 
        url("BrandonText-Light.woff2") format("woff2"),
        url("BrandonText-Light.woff") format("woff");
} 

@font-face {
    font-family: "BrandonText-Regular";
    src: 
        url("BrandonText-Regular.woff2") format("woff2"),
        url("BrandonText-Regular.woff") format("woff");
} 

@font-face {
    font-family: "BrandonText-Regular-Italic";
    src: 
        url("BrandonText-Regular-Italic.woff2") format("woff2"),
        url("BrandonText-Regular-Italic.woff") format("woff");
} 

@font-face {
    font-family: "BrandonText-Medium";
    src: 
        url("BrandonText-Medium.woff2") format("woff2"),
        url("BrandonText-Medium.woff") format("woff");
}

@font-face {
    font-family: "BrandonText-Medium-Italic";
    src: 
        url("fonts/BrandonText-Medium-Italic.woff2") format("woff2"),
        url("fonts/BrandonText-Medium-Italic.woff") format("woff");
}

@font-face {
    font-family: "BrandonTextBold";
    src: 
        url("fonts/BrandonText-Bold.woff2") format("woff2"),
        url("fonts/BrandonText-Bold.woff") format("woff");
} 

      

/* -------------------------------  TYPEFACES / ELEMENTS  -------------------------------*/


h1 {
    font-family: 'Roboto Mono';
    font-style: normal;
    font-weight: 700;
    font-size: 4rem;
    line-height: 80px;
    color: #000000;
    font-feature-settings: 'liga' off;
    margin:  0px; 
    padding:  0px;
}

h2 {
    font-family: 'Roboto Mono';
    font-style: normal;
    font-weight: 700;
    font-size: 48px;
    line-height: 60px;
    color:  #000000;
    font-feature-settings: 'liga' off;
    margin:  0px; 
    padding:  0px;
    letter-spacing: 0.1em;
}

h3 {
    font-family: 'BrandonText-Medium';
    font-style: normal;
    font-weight: 400;
    font-size: 2.125rem;
    line-height: 42px;
    color: #000000;
    font-feature-settings: 'liga' off;
    margin:  0px; 
    padding:  0px;
}

h3.roboto {
    font-family: 'Roboto Mono';
    font-style: normal;
    font-weight: 800;
    font-size: 2.5rem;
    line-height: 150%;
    letter-spacing: 0.1em;
    word-spacing: -5px;
    text-transform: uppercase;
    font-feature-settings: 'liga' off;
    margin:  0px; 
    padding:  0px;
}

h4 {
    font-family: 'Roboto Mono';
    font-style: normal;
    font-weight: 400;
    font-size: 28px;
    line-height: 35px;
    color: #000000;
    font-feature-settings: 'liga' off;
    margin:  0px; 
    padding:  0px;
}

h5 {
    font-family: 'Roboto Mono';
    font-style: normal;
    font-weight: 400;
    font-size: 24px;
    line-height: 1.25; 
    color:  #000000;
    font-feature-settings: 'liga' off; 
    margin:  0; 
    padding:  0;
}

h6 {
    font-family: 'Roboto Mono';
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 1.25;
    color:  #000000;
    font-feature-settings: 'liga' off; 
    margin:  0; 
    padding:  0;
}

p, ul, ol, li, div {
    font-family: "Roboto Mono", 'Courier'; 
    font-style: normal;
    font-weight:  400; 
    font-size:  1rem; 
    line-height:  2; 
    letter-spacing: 0.02em;
    font-feature-settings: 'liga' off;
    margin:  0; 
    padding: 0;
}

ul, ol {
    font-weight:  500;
}

@media only screen and (max-width: 600px) {
    h3.roboto {font-size: 1.75rem;}
}

.hlo-roboto {font-family: 'Roboto Mono', sans-serif !important;}

/* -------------------------------  TYPEFACES / CUSTOM  -------------------------------*/

.hlo-medium     {font-weight: 500 !important;}
.hlo-semibold   {font-weight: 600 !important;}
.hlo-bold       {font-weight: 700 !important;}

.type-p-big {
    font-size:  1.125rem !important;
    line-height:  2.75;
}

@media only screen and (max-width: 600px) {
    /* For phones */
    .type-p-big {
        line-height: 2;
    }
}


.type-p-small {
    font-size: 0.85rem !important;
    line-height: 1.5;
}


.type-p-xsmall {
    font-size:  0.75rem !important;
    line-height:  1.5;
    letter-spacing:  unset;
}


.type-product-name {
    letter-spacing: 0.035em;
}


.type-emphatic {
    font-family: 'Roboto Mono';
    font-weight: 700 ;
    font-style: normal;
    font-size: 6rem;
    line-height: 1.25;
    color:  #000000;
    text-transform: uppercase;
}

    @media only screen and (max-width: 900px) {
        /* For tablets */
        .type-emphatic {
            font-size:  4.5rem;
            line-height:  1.25;
        }
    }

    @media only screen and (max-width: 600px) {
        /* For phones */
        .type-emphatic {
            font-size:  3rem;
            line-height:  1.25;
        }
    }

.type-highlight {
    display:  inline !important;
    line-height:  2.5em !important;
    color:  white !important;
     box-shadow: 15px 0px 0px white, -15px 0 0 white; 
    -webkit-box-shadow: 15px 0 0 white, -15px 0 0 white; 
    -webkit-box-decoration-break: clone; 
    -ms-box-decoration-break: clone; 
    -o-box-decoration-break: clone; 
    box-decoration-break: clone;
}

.type-highlight-big {
    font-family:  'BrandonText-Medium' !important;
    padding: 10px 0px; 
}

.type-highlight-small {
    font-family: 'Roboto Mono' !important;
    font-weight: 600; 
    padding: 5px 0px; 
}

.type-highlight-adj-left {margin-left: 15px !important;}
.type-highlight-adj-left-reverse {margin-left: -15px !important;}
.type-highlight-adj-right-reverse {margin-right: -15px !important;}


.type-highlight-c2         {background-color: #C2C2C2; box-shadow: 15px 0 0 #C2C2C2, -15px 0 0 #C2C2C2} 
.type-highlight-d2         {background-color: #D2D2D2; box-shadow: 15px 0 0 #D2D2D2, -15px 0 0 #D2D2D2} 
.type-highlight-e2         {background-color: #E2E2E2; box-shadow: 15px 0 0 #E2E2E2, -15px 0 0 #E2E2E2} 
.type-highlight-black      {background-color: black; box-shadow: 15px 0 0 black, -15px 0 0 black;}
.type-highlight-white      {background-color: white; box-shadow: 15px 0 0 white, -15px 0 0 white;}
.type-highlight-capsene    {background-color:  var(--a-color-capsene); box-shadow: 15px 0 0 var(--a-color-capsene), -15px 0 0 var(--a-color-capsene);}
.type-highlight-saltlick   {background-color:  var(--a-color-saltlick); box-shadow:15px 0 0 var(--a-color-saltlick), -15px 0 0 var(--a-color-saltlick);}
.type-highlight-bloozberry {background-color:  var(--a-color-bloozberry); box-shadow: 15px 0 0 var(--a-color-bloozberry), -15px 0 0 var(--a-color-bloozberry);}
.type-highlight-chillwhite {background-color:  var(--a-color-chillwhite); box-shadow: 15px 0 0 var(--a-color-chillwhite), -15px 0 0 var(--a-color-chillwhite);}
.type-highlight-quino      {background-color:  var(--a-color-quino); box-shadow: 15px 0 0 var(--a-color-quino), -15px 0 0 var(--a-color-quino);}
.type-highlight-dula       {background-color:  var(--a-color-dula); box-shadow: 15px 0 0 var(--a-color-dula), -15px 0 0 var(--a-color-dula);}
.type-highlight-sniffing   {background-color:  var(--a-color-sniffing); box-shadow: 15px 0 0 var(--a-color-sniffing), -15px 0 0 var(--a-color-sniffing);}
.type-highlight-bundle     {background-color:  var(--a-color-bundle); box-shadow: 15px 0 0 var(--a-color-bundle), -15px 0 0 var(--a-color-bundle);}
.type-highlight-giftcard   {background-color:  var(--a-color-giftcard); box-shadow: 15px 0 0 var(--a-color-giftcard), -15px 0 0 var(--a-color-giftcard);}
.type-highlight-duo        {background-color:  var(--a-color-sniffing); box-shadow: 15px 0 0 var(--a-color-sniffing), -15px 0 0 var(--a-color-sniffing);}
.type-highlight-BFCM       {background-color:  var(--a-color-BFCM24); box-shadow: 15px 0 0 var(--a-color-BFCM24), -15px 0 0 var(--a-color-BFCM24);}

/* -------------------------------  BUTTONS  -------------------------------*/

button {
    box-sizing:  border-box;
    border: 1px solid #7A7A7A; 
    border-radius: 5px; 
    font-family: 'Roboto Mono'; 
    letter-spacing: .75px; 
    line-height: 1;
    text-align: center;  

}


button.addtobag {
    padding: 15px 50px; 
    background-color: black;
    color: white; 
    font-size: 1rem;
}

/* ----------  ADD-TO-BAG BUTTONS ---------- */

button.button-addtobag-main-black {
    padding: 20px 50px; 
    font-size: 0.85rem; 
    color: #FFFFFF;
    background-color:  black;
}

button.button-addtobag-main-black:hover {
    background-color:  var(--a-color-black-light);
}


button.button-addtobag-small-trans  { 
    padding: 10px 15px; 
    font-size: 0.85rem; 
    color: #000;
    border: 1px solid #000 !important; 
    background-color:  transparent;
}

button.button-addtobag-xsmall-trans {
    padding: 7.5px 12px; 
    font-size: 0.75rem; 
    color: #000000; 
    background-color:  transparent;
}

button.button-addtobag-small-trans:hover, 
button.button-addtobag-xsmall-trans:hover { 
    background-color: RGB(0,0,0,.05)
}

        @media only screen and (min-width: 550px) {
            button.button-addtobag-main-black {
            padding: 15px 50px;
            }
        }


/* ---------- GENERAL BUTTONS ---------- */

button.button-gen-main-black-trans {
    color: #000000;
    padding: 20px 50px; 
    font-size: 1rem; 
    background-color: transparent;
}


button.button-gen-main-white-trans {
    border-color: #FFFFFF;
    color: #FFFFFF;
    padding: 20px 50px; 
    font-size: 1rem; 
    background-color: transparent;
}

button.button-gen-small-white-trans {
    padding: 10px 15px; 
    font-size: 0.85rem; 
    background-color: transparent;
    border-color: #FFFFFF;
    color: #FFFFFF;
}




button.button-gen-small-black-trans {
    padding: 10px 15px; 
    font-size: 0.85rem; 
    background-color: transparent;
    border-color: #000;
    color: #000;
}

button.button-gen-main-black-trans:hover,
button.button-gen-small-black-trans:hover,
button.button-gen-main-white-trans:hover,
button.button-gen-small-white-trans:hover {
    background-color: RGB(0,0,0,.15)
}

        @media only screen and (min-width: 550px) {
            /* for desktop */
            button.button-gen-main-black-trans,
            button.button-gen-main-white-trans
             {
                padding: 15px 50px; 
            }
            
        }


/* ---------- PRODUCT DETAILS BUTTONS (NO BORDER) ---------- */

button.button-product-details {
    background-color: transparent; 
    display:  block; 
    border: none; 
    cursor: pointer; 
    padding: 0; 
    margin: 0;
}

button.button-product-details:hover {
    /* text-decoration:  underline; */
    background-color: #E8E8E8;
}



  







/* ===============================      MOLECULES       =============================== */
/* 
    PRODUCT-CARD / COLLECTIONS 
*/
  

/* -------------------------------  PRODUCT-CARD / COLLECTIONS  -------------------------------*/
      
.mol-305-product-card  {
    padding:  0px 0px 48px 0px;
    text-align:  center; 
    position: relative;
}

.o101-feature01.mol-305-product-card,
.o101-feature02.mol-305-product-card {
    padding: 0 50px 48px 50px;
}

@media only screen and (max-width: 1100px) {
    .o101-feature01.mol-305-product-card,
    .o101-feature02.mol-305-product-card {
        padding: 0 0 48px 0;
    }
}

@media only screen and (max-width: 900px) {
    .o101-feature01.mol-305-product-card,
    .o101-feature02.mol-305-product-card {
        padding: 0 0% 48px 0%;
    }
}


.mol-305-product-card div img {
    width:  100%; 
    height:  auto;
}

.mol-305-product-card div h5 {
    width:  100%; 
    height:  auto; 
    padding-bottom: 16px; 
    padding-top:  0px;
}

.mol-305-product-card div p {
    padding-bottom: 24px;
}




@media only screen and (max-width: 550px) {
    /* for mobile */
   

}
      



/* =============================== ORGANISMS =============================== */


.o000 {
  margin: 0 auto; 
  max-width:  1512px;
} 
      
.o001 {
  margin: var(--a-gap1) var(--a-gap1) 0 var(--a-gap1);
}



@media only screen and (min-width: 550px) {
    .o002-dsk {
        margin: var(--a-gap1) var(--a-gap1) 0 var(--a-gap1);
    }

}

/* -------------------------------  o101-01 / Scents / Hero / Grid  -------------------------------*/





.hlo-about-hero {
    display: flex; 
    width: 100%;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    background-color: #F8F8F8;
    gap: 50px;
    padding: 50px 0px;
    margin-bottom:  var(--a-gap1);
}

.hlo-about-heroA {
    width: 42%;
    background-color: #F8F8F8;
    display: flex;
    justify-content: flex-end;
}

.hlo-about-heroA img {
    max-width: 500px; 
    width: 100%;
    padding-bottom:  20px;
    margin: 0 auto;
    display: block;
}


.hlo-about-heroB {
    width: 58%;
}


.hlo-about-heroB img {
    max-width: 600px; 
    width: 100%;
}


@media only screen and (max-width: 550px) {
    /* for phones */
    .hlo-about-hero {
        flex-direction: column-reverse;
        padding-bottom: 75px;
    }

    .hlo-about-heroA, .hlo-about-heroB {
        width: 100%;
        justify-content: center;
       
    }

    .hlo-about-heroA div {
        width: 60%;
        max-width: 400px;
        margin: 0 auto;
    }
    
    .hlo-about-heroB {
        text-align: center;
    } 

    .hlo-about-intro p {
        text-align: center;
    }
}










/* -------------------------------      org-101-02 / Scents / Features / Grid       -------------------------------*/

.o101-feature01 {grid-area: f01; background-color: var(--a-color-gray1) !important;}
.o101-feature02 {grid-area: f02; background-color: var(--a-color-gray1) !important;}

.o101_02 {
    display:  grid; 
    gap:  var(--a-gap1); 
    background-color:  white; 
    grid-auto-rows:  1fr; 
    align-items:  stretch; 
    grid-template-areas:  "f01" "f02";
    padding-bottom:  var(--a-gap1);
}


.o101_02 > div {
    display:  grid;
    place-items:  center;
}


@media only screen and (min-width: 900px) {
    .o101_02 {
        grid-template-columns: 2fr 2fr;
        grid-template-areas: "f01 f02";
  }
}


/* -------------------------------      org-101-03 / Scents / Product Cards / Grid      -------------------------------*/

.o101-card01 {grid-area: o01;}
.o101-card02 {grid-area: o02;}
.o101-card03 {grid-area: o03;}
.o101-card04 {grid-area: o04;}
.o101-card05 {grid-area: o05;}
.o101-card06 {grid-area: o06;}
.o101-card07 {grid-area: o07; background:  url(/cdn/shop/files/collections-cc-grid-hero1.jpg?v=1664492000); background-repeat: no-repeat; background-size: cover; background-position:  center top}
.o101-card08 {grid-area: o08;}
.o101-card09 {grid-area: o09;} 
.o101-card10 {grid-area: o10;}
.o101-card11 {grid-area: o11;}
.o101-card12 {grid-area: o12; background:  url(/cdn/shop/files/collections-cc-grid-hero2.jpg?v=1664496456); background-repeat: no-repeat; background-size: cover; background-position:  center top}
.o101-card13 {grid-area: o13;}
.o101-card14 {grid-area: o14;}
.o101-card15 {grid-area: o15;}
.o101-card16 {grid-area: o16;}
.o101-card17 {grid-area: o17;}
.o101-card18 {grid-area: o18;}


.o101_03 {
    display:  grid; 
    gap:  var(--a-gap1); 
    background-color:  white;
    align-items:  stretch;
    grid-template-rows:  repeat(8, 1fr);
    grid-template-areas:  "o01" "o04" "o03" "o06" "o07" "o08" "o09" "o12" "o14" "o15" "o16" "o17" "o18" "o02" "o05" "o10" "o13" "o11";
                  
}

.o101-card15, 
.o101-card16, 
.o101-card17, 
.o101-card18,
.o101-card02, 
.o101-card05, 
.o101-card10, 
.o101-card13,
/* .o101-card01, */
.o101-card11 {
 display:  none !important;
}

.o101_03 > div {
    background-color:  var(--a-color-e2);
}

.o101_03 > a > div {
    background-color:  var(--a-color-gray1);
}

.o101-card-text {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    text-align: center;
    padding: 0px;  
    background-color: #E2E2E2;    
  }

  .o101-card-text:hover, .o101-card-logo:hover {
    background-color: #C2C2C2; 
  }

  .o101-card-logo {
    display: flex;
    text-align: center !important;
    justify-content: center;
    align-items: center;
    
  }

  .o101-card-logo img {
    max-width: 50px;
    opacity: 1;
  }
  
  .o101-card-text p {
    color: var(--a-color-saltlick) !important;
    padding: 10px;
    font-size: 1rem !important;
   
  }

  .o101-card-alert p {
    position: absolute; 
    top: 20px;
    right: 20px;
    padding: 10px 20px !important;
    background-color: black;
    color: white;
    font-size: 0.85rem;
  }

  .o101-card-stock p {
    position: absolute; 
    top: 0;
    right: 0;
    padding: 10px 20px !important;
    background-color: red;
    color: white;
    font-size: 0.85rem;
  }
  

@media only screen and (min-width: 550px) {
    .o101-card15, 
    .o101-card16, 
    .o101-card17, 
    .o101-card18, 
    .o101-card02, 
    .o101-card05, 
    .o101-card10, 
    .o101-card13,
    .o101-card01,
    .o101-card11 {
        display:  grid !important;
    }

    .o101_03 {
        grid-template-rows: unset;
        grid-auto-rows:  1fr !important;
        grid-template-columns: repeat(2, 1fr);
        grid-template-areas: "o03 o01" "o02 o04" "o05 o06" "o07 o07" "o08 o09" "o10 o11" "o12 o12" "o13 o14" "o15 o16" "o17 o18";
        }
}


@media only screen and (min-width: 900px) {
    /* for tablets */
    .o101_03 {
        grid-template-columns: repeat(3, 1fr);
        grid-template-areas: "o02 o01 o03"  "o04 o05 o06" "o07 o07 o07" "o08 o09 o10" "o12 o12 o11" "o13 o14 o15" "o16 o17 o18";
    }
}


@media only screen and (min-width: 1100px) {
    /* for laptops */
    .o101_03 {
            grid-template-columns: repeat(4, 1fr);
            grid-template-areas: "o01 o02 o03 o04" "o05 o06 o07 o07" "o08 o10 o09 o11" "o12 o12 o13 o14" "o15 o16 o17 o18";
    }
}




      

/* 
      
      ------------------------------ ORGANISM 
      ------------------------------ P110
      ------------------------------ PRODUCT DESCRIPTION PAGES (PDP)
      
      o102-01
          o102-01A
              o102-01A-mob / o102-01A-dsk
          o102-01B
              o102-01B-info
                  o102-01B-info-details ul button li (x3)
              o102-01B-cta
      o102-01A-mob
*/


/* ---------- for mobile and tablet ---------- */

.o102-01 {
    display:  flex;
    flex-direction:  column;
    align-items:  space-between;
    padding-bottom: 0px;
    margin:  0px; 
   
}

.o102-01A {
    width:  100%; 
}

.o102-01A-mob {
  font-size: 0px;
 }

.o102-01A-dsk {
    display: var(--a-display-hide);
}

.o102-01B {
    display:  flex; 
    flex-direction:  column; 
    width: 50%; 
    justify-content: space-between; 
    padding: 10px 10px 0 10px;
    margin: 0%; 
    height: 100%;
}

.o102-01B-info {
    padding: 20px 0px;
    
}

.o102-01B-info p {
    color: #000;
    margin-top: 0px;
    font-size: 14px;
}
/* 
.o102-01B-info p:nth-child(3) {
    margin-top: 0;
} */


.o102-01B-info-details {
    padding-top: 36px; 
}

.o102-01B-info-details ul {gap: 20px;}

.o102-01B-info-details ul button li {
    display: list-item;
    padding: 0;
    padding-bottom: 5px;
    font-size: 1.15rem;
}



.o102-01B-info-details-listitem { 
    margin-bottom: 25px;  
 }

 .o102-01B-info-details-listitem:last-child {
    margin-bottom: 0px;
 }

.o102-01B-info-details ul button li::before {
    content: '▶';
} 
      
.o102-01B-cta {
    padding: 0; 
    margin: 40px 0;
    display: var(--a-display-show);
}

.o102-02-mob {
    display:  flex; 
    gap: 10px; 
    flex-direction:  column; 
    background-color:  white;  
    margin: 0; 
    padding: 0; 
    font-size: 0; 
    text-align: center;
    display: none;
}

.o102-01B-info-details-new {
    row-direction: column;
}
      
.o102-03 {
  text-align: center;
  color: #E2E2E2;
  font-size: 3rem;
  padding-top: 100px; 
  cursor: pointer;
}

/* ---------- for laptop and desktop screens ---------- */

    @media only screen and (min-width: 900px) {
    
        .o102-01 {
            flex-direction:  row; 
            position: relative;
        }
    
        .o102-01A {
            width:  50% !important;
        }
    
        .o102-01A-mob, .o102-02-mob {
            display: none;
        }
    
        .o102-01A-dsk {
            display:  flex; 
            gap: 10px; 
            flex-direction:  column;  
            margin: 0; 
            padding: 0; 
            font-size: 0; 
            text-align: center;
        }
    
         .o102-01B {
            width:  50%;
            padding: 0 5%;
            margin: 0%;
            position: -webkit-sticky;
            position: sticky !important;
            top: 125px; 
            align-self: flex-start;  
         }

         .o102-01B-info-details ul button li {
            font-size: 1rem;
         }

         .o102-01B-info-details-new {
            row-direction: row;
        }

    }



      

/* ----------------------------------------- || ELEMENTS --------------------------------- */


/* -------------------- | SNIFFING SET CONTENTS CARD --------------------------------- */

.hlo-elm-contentcard {border: 1px solid #7A7A7A;  width: 100%; padding: 10px; text-align: left;}
.hlo-elm-contentcard-ingredients {padding: 10px 0; border-bottom: 1px solid #7A7A7A; font-size: 0.85rem; color: #7A7A7A;}
.hlo-elm-contentcard-description {font-size: 0.85rem; padding-top: 10px;}
    



.hlo-buffer-vert-40 {height: 40px;}
      





/* 231203 – PDP EDITS ADDED */

.hlo-pdp-hero {display:  flex; flex-direction: row; align-items: space-between; position: relative; padding-bottom: 0px; margin:  0px;}
.hlo-pdp-hero-img {width: 50%;}
.hlo-pdp-hero-info {width: 50%; padding: 0 5%; margin-top: 50px; height: 100%; position: sticky; top: 200px;}
.hlo-pdp-hero-info-alert {text-align: left;}
.hlo-pdp-hero-info-alert p {background-color: #9F0902; display: inline; padding: 5px 15px; color: #FFFFFF !important;}
.hlo-pdp-hero-info div p {color: #000; font-weight: 400; font-size: 13px;}
.hlo-pdp-hero-info div hr {margin: 20px 0; border-color: #C2C2C2;}
.hlo-pdp-hero-info-details p {font-size: 12px !important; font-weight: 800 !important; padding-bottom: 10px}
.hlo-pdp-hero-info-details-options {display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; gap: 25px 35px;}
.hlo-pdp-hero-info-details-options button {padding: 6px 12px; border-radius: 3px; font-size: 13px; border: 1px solid {{product.metafields.custom.product_color}};} 
.hlo-pdp-hero-info-cta {margin-top: 0px; padding-top: 25px;}
.hlo-pdp-hero-info-cta-button {padding: 20px 50px; font-size: 14px; font-weight: 600; color: #FFFFFF; background-color: black; min-width: 75%;}
.hlo-pdp-hero-info-trust {padding-top: 10px; font-size: 12px; color: #727272 !important;}


@media only screen and (max-width: 750px) {
    .hlo-pdp-hero {flex-direction: column;}
    .hlo-pdp-hero-img {width: 100%;}
    .hlo-pdp-hero-info {width: 100%; margin-top: 50px; position: unset;}
    .hlo-pdp-hero-info-details-options {gap:  15px;}
    .hlo-pdp-hero-info-cta-button {width: 100%;}
    .hlo-pdp-hero-info-trust {text-align: center;}
  }