/** Shopify CDN: Minification failed

Line 117:0 All "@import" rules must come first
Line 118:0 All "@import" rules must come first
Line 218:0 Unexpected "}"

**/
/* © Ambient Inks 2025 v1.5.6

eau claire, wisconsin
www.ambientinks.com - @ambientinks
ecommerce@ambientinks.com

This file will override styles defined in default_collection_styles.css.

*/

.description p strong {
      font-weight: bold !important;
   }


:root {
  --main-color:#050505; /* black */
  --text-color:#FFFFFF; /* white */
  
  --button-bg-color:#050505; /* black */
  --button-text:#FFFFFF; /* white */
  --button-outline:#FFFFFF; /* white */
  --button-radius:0px; /* 0px rounded, 30px rounded */
  
  --button-bg-hover:#FFFFFF; /* white */
  --button-text-hover:#050505; /* black */
  
  --link-main:#FFFFFF; /* white */
  --link-secondary:#d09838; /* gold */
  --link-hover:#d09838; /* gold */
  
  --footer-color:#050505; /* black */

  --ai-logo:transparent url(/cdn/shop/files/AI-Logo-Icon_White.svg?v=1736884363;) no-repeat scroll center top;
  --band-logo:url(/cdn/shop/files/Jonah-Kagen_Logo-White.svg?v=1748461880);
  --band-logo-height:75px; /* height of top logo */

  --font-chosen:"Mericana-Regular";
  --font-body:"NickelScribble-Regular";

  --font-heading-size: 24px; 
  --font-heading-size_prod-title: 16px;
  --font-body-size: 13px; 
  --font-nav-size: 14x;

  --header-border: solid var(--button-outline) 1px;

  --type-style: uppercase; /* replace: uppercase or lowercase -- titles and buttons */
  --type-spacing: 1.2px; /* replace: px or em -- titles and buttons */
}

/* REPLACE: AI logo url in light or dark for the --ai-logo field above

white logo:
/cdn/shop/files/AI-Logo-Icon_White.svg?v=1736884363;

black logo:
/cdn/shop/files/AI-Logo-Icon_Black.svg?v=1736884363;

--font-chosen:"proxima-nova", sans-serif;

*/




/* * * * * *  F O N T  F I L E S   * * * * * */

/* add in custom font in "files" and then link below */
@font-face {
  font-family: OpenSansSemiCondensMed;
  src: url(/cdn/shop/files/OpenSans_SemiCondensed-Medium.ttf?v=1741965746);
}
@font-face {
  font-family: OpenSansMedium;
  src: url(/cdn/shop/files/OpenSans-Medium.ttf?v=1741965746);
}

@font-face {
  font-family: PolySans;
  src: url(/cdn/shop/files/PolySans-Slim.woff2?v=1746543470);
}

@font-face {
  font-family: NeuePlakSemiBold;
  src: url(/cdn/shop/files/TheBackfires_Neue_Plak_SemiBold.ttf?v=1747251943);
}


@font-face {
  font-family: Mericana-Regular;
  src: url(/cdn/shop/files/Mericana-Regular.otf?v=1748461942);
} /* Jonah Kagen - Heading*/

@font-face {
  font-family: NickelScribble-Regular;
  src: url(/cdn/shop/files/NickelScribble-Regular.otf?v=1748463210);
} /* Jonah Kagen - Body*/










/* import font from Google or Adobe font */
@import url("https://use.typekit.net/lpy5nqx.css"); /* import for Proxima Nova */
@import url("https://use.typekit.net/lpy5nqx.css"); /* import for Big Caslon */








/* change the background color of the whole page */
body {
  color: var(--text-color);
  background-color: var(--main-color);
  font-family:var(--font-chosen);
}




/* OPTIONAL:  Add in background image, uncomment to do so */

/* body {
  background-image:url(/cdn/shop/files/Rabbitology_Background.jpg?v=1734473273);
  background-repeat:no-repeat;
  background-position: center center;
  background-attachment: fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size:cover;
} 


/* default link colors */
a:link {
  color: var(--link-main);
  text-decoration:none;
}
a:visited {
  color: var(--link-main);
  text-decoration:none;
}
a:hover, 
a:active {
  color: var(--link-hover);
  text-decoration:none;
}

/* * * * * * B U T T O N  S T Y L E S  * * * * * */

.btn,
.btn:link, 
.btn:visited {
  transition: 0.3s;
  color: var(--button-text);
  letter-spacing: var(--type-spacing);
  text-transform: var(--type-style);
  font-family:var(--font-chosen);
  font-weight:normal;
  border: none;
  text-shadow: none;
  outline: 1px solid var(--button-outline);
  box-shadow: none;-webkit-box-shadow: none; /* removes weird box shadow in interior of button */
  letter-spacing: var(--type-spacing);
  text-transform: var(--type-style);
    
  
  /* OPTIONAL: to add rounded corners, set all three radius numbers to 5px, 8px, etc. Must have the letters px after the number. */
  -webkit-border-radius: var(--button-radius);
  -moz-border-radius: var(--button-radius);
  border-radius: var(--button-radius);
  
  /* Change the button colors */
  background-color: var(--button-bg-color);
  background-image:none;  
}

  /* Also copy the background color to the hover state. If you wanted to have a different color when hovering over a button, you could define different colors here */
  .btn:hover,
  .btn:focus,
  .btn:active,
  .btn.active,
  .btn.disabled,
  .btn[disabled] {
    color: var(--button-text-hover);
    background-color: var(--button-bg-hover);
    border: none;
    background-image:none;
  }
  
  .btn:active,
  .btn.active {
    background-color: var(--button-outline);
    outline: 1px solid var(--button-outline);
    border: none;
    background-image:none;
    box-shadow:none;
    mox-box-shadow:none;
    webkit-box-shadow:none;
  }
  
}



/* * * * * * H E A D E R  and  N A V I G A T I O N  * * * * * */


.link_cart { display:block; float:right; width:100px; height:30px; text-align:center; line-height:30px; font-size:16px; margin-top:15px; }
.link_cart:hover, 
.link_cart:active { text-decoration:none; color:var(--link-hover); transition: color 150ms;}
.link_cart .badge {
  background:var(--link-main); /* circle color next to cart icon */
  color: var(--main-color); /* number color next to cart icon */
  text-shadow:none;
  padding:5px 10px;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
}
.badge:hover{
  background-color:var(--link-hover);
  transition: background-color 150ms;
}

.link_cart{
    display: block;
    float: right;
    text-align: right;
    line-height: 30px;
    /* font-size: 14px; */
    width: 80px;
    margin-top: 0px;
}

.icon-shopping-cart{padding-right: 10px;}


.logo{
    display: block;
    height: var(--band-logo-height);
    margin-left: 0px;
    background-position: center;
    background-size: contain;
    background-image: var(--band-logo);
    background-repeat: no-repeat;
    overflow: hidden;
    text-indent: -999em;
}




/* The tooltip pop-out things (when you hover over the Cart link and an  "Checkout" pop-out appears. */
/* Each of these colors should be the same: REMOVED TOOLTIP WITH DISPLAY:NONE; */
.tooltip-inner { display:none; background-color: var(--main-color); }
.tooltip-inner { display:none;color: var(--button-text); } /* text color for "checkout" */
.tooltip.right .tooltip-arrow { display:none;border-right-color: var(--button-text); }
.tooltip.left .tooltip-arrow { display:none;border-left-color: var(--button-text); }
.tooltip.bottom .tooltip-arrow { display:none;border-bottom-color: var(--button-text); }

/* Navigation text color. */
.navbar .nav {
  color: var(--link-main);

}



/* =================== OPTION 1: FLEX CODE FOR NAV =================== */

      .navbar{
        margin: 5px 0 5px; /* reducing extra space from nav top to products  */
      }
    
      .navbar .nav {
        display: flex;
        flex-wrap: none;
        justify-content: space-evenly; /* space-between has it go to margins, space-evenly centers them */
      }
    
      navbar .nav > li {
        color: var(--link-main);
        margin: 0;
        width: auto;
      }

      .navbar .nav>li:last-child {
      margin: 0;
        width: auto;
      }

      .navbar .nav>li {
          margin: 0;
        width: auto;
      }
      
    
    /* Also change the navigation text color here. (should be the same as ".navbar .nav" above. */
      .navbar .nav > li > a {
        color: var(--link-main);
        background: transparent; /* Change to hex code if you would like to change nav button color, in both spots */
        border-bottom: var(--main-color) 3px;
        letter-spacing: 2px;
        font-size: 14px; /* Navigation category font sizes. */

      }
    
    /* Color the navigation should be when you hover over a nav link: */
      .navbar .nav > li > a:focus,
      .navbar .nav > li > a:hover,
      .navbar .nav > .active > a,
      .navbar .nav > .active > a:hover,
      .navbar .nav > .active > a:focus {
        color: var(--link-hover);
        text-decoration: none;
        background: transparent; /* Change to hex code if you would like to change nav button color, in both spots */
              
        border-bottom: solid var(--main-color) 0px; /* border-bottom solid #color 1px is the small line under the nav when you hover over it */
            
    /* this is the stripe that appears below the navigation link when you hover over it */
            
        -webkit-box-shadow: 0 0px 0 var(--main-color);
        -moz-box-shadow: 0 0px 0 var(--main-color);
        box-shadow: 0 0px 0 var(--main-color);
        }
    
    /* nav underline hover effect */
    
      .nav a {
        color: var(--link-hover);
        position: relative;
        text-decoration: none;
        width:100%;
      }
      
      .nav a::before {
        content: '';
        position: absolute;
        width: 100%;
        height: 2px;
        border-radius: 2px;
        background-color: var(--link-hover);
        bottom: 0;
        left: 0;
        transform-origin: right;
        transform: scaleX(0);
        transition: transform .3s ease-in-out;
      }
      
      .nav a:hover::before {
        transform-origin: left;
        transform: scaleX(1);
      }

    

/* ======================= END FLEX CODE FOR NAV ======================= */


/* * * * * * *  H E A D E R   * * * * * */
.header { background: var(--main-color); border-bottom: var(--header-border); padding: 15px 30px 15px 30px;}
.header_row{ display: flex; justify-content: center; align-items: center; padding: 15px 0 15px 0;}
.header_logo{ display: inline-block; width: 100%; max-width: 400px; align-items: center; margin-left: auto; margin-right: auto;}


/* * * * * * * H E A D E R - L E F T  L O G O * * * * * */
/* .header_home{ display:none;}
.header_logo{ display: block; margin-left: 0;}
.header_logo a{ background-position: left;} */

/* * * * * * * H E A D E R - C E N T E R  L O G O * * * * * */
.header_home{ line-height: 30px; font-size: var(--font-nav-size); text-transform: uppercase; letter-spacing: 2px; text-align: left; width: 85px;}








/* * * * * * C O L L E C T I O N  C O N T E N T  A R E A  * * * * * */


/* Change the background color and background image of the content area  */
.content {
  background-color: var(--main-color); /* Collection Page Full Background */
  background-image:none;
}
body.page_product .content {
  background-color: var(--main-color); /* Product Page Full Background */
  background-image:none;
}

.page_content p, .page_content .description {	/* Product Page type style change */
  font-family: var(--font-body);
  font-size: var(--font-body-size);
  line-height: 17px;
  margin: 15px 0px 25px 0px;
}

.page_content .title{
  color: var(--text-color);
    text-shadow: none;
    letter-spacing: var(--type-spacing);
    text-transform: var(--type-style);
    font-size: var(--font-heading-size);
    font-weight: 100;
}

.page_content .price{
  color: var(--text-color);
    text-shadow: none;
    font-size: calc(var(--font-heading-size)*0.75);
    font-weight: 100;
    opacity:0.5;
    margin-top:0;
    margin-bottom:15px
}

/* Product Image Block Background on Collection Pages */
.result {
  background: var(--main-color);  /* Product Image Block Background */
  border-bottom:solid var(--main-color) 0px; /* Product Image Block Background Underline, Change width to highlight*/
  text-shadow:none;
  letter-spacing: var(--type-spacing);
  text-transform: var(--type-style);
}

.result .title {
    font-size: var(--font-heading-size_prod-title);
    text-shadow: none;
}

/* to remove the border around the products, set border like this */
.results .span4 {
  border: solid var(--main-color) 1px; /* OPTIONAL: border around product card result, same as bkgrnd to hide */
}

/* @media (min-width: 768px) {
  .results {
    min-height:340px;
  }
} */

/* OPTIONAL: change the color of the stripe that appears below a result when you hover over it */
.result:hover {
  -webkit-box-shadow: 0 0px 0 var(--button-text);
     -moz-box-shadow: 0 0px 0 var(--button-text);
          box-shadow: 0 0px 0 var(--button-text);
}
c
/* Change the color of the product title. */
.result .title {
  color: var(--button-text);
  font-size:16px;
  text-shadow: none !important;
  text-transform:uppercase;
  text-shadow: 0px 0px 0px var(--button-text);
  /*font-weight: bold;*/
}

/* You'll also need to change the color of the product titles here. These colors should be the same as the ".result .title" style. But the a:hover,a:active color could be different (that's the color when your mouse hovers over the text) */
.result .title a:link,
.result .title a:visited {
  color: var(--button-text);
  text-decoration:none;
  text-shadow: none !important;
  transition: 0.2s;
    /*font-weight: bold;*/
}

/* Change the color of the product title on hover */
.result .title a:hover,
.result .title a:active {
  color: var(--link-hover);
  
}

/* Removes the box shadow around product images - this creates box shadow */
.result .image img {
  -webkit-box-shadow:none;
  -moz-box-shadow:none;
  box-shadow:none;
}





/* * * * * * F O O T E R * * * * * */

/* Change the footer background color, and color of the border at the top of the footer */
.footer {
  background: var(--footer-color);
  border-top: solid var(--button-text) 0px; /* OPTIONAL: Add border on top of footer block */
  padding:0px 0px 20px 0px;
}

.footer_ambientmerch_logo {
  background: var(--ai-logo);
}

/* Change the color of the boxy links like "HOME" in the header and "CONTACT US" in the footer. */
.link_block:link, 
.link_block:visited {
  color: var(--link-main);
  text-decoration:none;
  background: transparent;
}
/* the color when you hover over one of these links */
.link_block:hover, 
.link_block:active, 
.link_block:focus {
  color: var(--link-hover);
  text-decoration:none;
  background: transparent;
}
.footer_ambient-link:hover{
  color:var(--link-hover);
}

/* Decrease spacing from product grid to footer*/
.content{
  padding-bottom:0px;
  padding-top:5px;
}



/* * * * * * P R O D U C T  P A G E S * * * * * */

/* Here are the colors for the individual-product page. color should match text color of site */

/* Product Page Container behind product image and description. */
.page_content {
  color: var(--text-color);
  text-shadow:none; /* text has a light gray shadow */
  border-bottom: solid var(--button-text) 0px; /* border under product content hidden */
  background: transparent; /* OPTIONAL: change transparent to hex code to add color to block.*/
  padding: 35px 35px 0px 35px; /* reduction to spacing at top and bottom of block*/
}

/* Divider line under product title */
.page_content hr{
  border-bottom: solid var(--button-text) 0px; /* OPTIONAL: add width to this to turn on */
  border-top: 0px;
}

/* Remove product page image shadow */
.page_content .image img {
    box-shadow: 0 0 0px var(--main-color);
}

/* The links on the individual-product pages in the description: Change that here: */
.page_content a:link,
.page_content a:visited {
  color:var(--link-secondary);
  text-decoration:none;
    text-shadow:none;
}
/* and the color when you hover over a link: */
.page_content a:hover, 
.page_content a:active {
  color: var(--link-hover);
  text-decoration:none;
}

/* remove share links entirely */
.share_links{
  display:none;
}

  /* The colors for the Twitter and Facebook icons: */
    .share_links a:link, 
    .share_links a:visited {
      color: var(--text-color);
      text-decoration:none;
      transition: 0.2s;
    }
    .share_links a:hover, 
    .share_links a:active {
      color: var(--link-hover);
      text-decoration:none;
    }

/* Products You May Like Divider Line */
.related hr {
  border-top: 1px solid var(--button-text);
  border-bottom: 0px;
}

/* Remove hidden line break above price */
.span5 hr {
    display: none;
}


/* The heading for the Related items "You might also like:" */
.related h3 {
    color: var(--text-color);
    text-shadow:none;
    letter-spacing: var(--type-spacing);
    text-transform: var(--type-style);
    font-size: var(--font-heading-size);
    font-weight:100;
}

  

/* CONTACT INFO SECTION */
    /* The contact info colors. (the black boxes where it has the phone, email and address on the contact page) */
    .contact-info .table .cell {
      background:#003eff;
      color: #ffffff;
    }
    
    /* also set the text color here */
    .contact-info .table .cell p,
    .contact-info .table .cell address {
      color: #ffffff;
    }
    
    /* Here's the color for the email link in the contact info.*/
    .contact-info .table .cell a:link,
    .contact-info .table .cell a:visited {
      color: #000000;
    }
    .contact-info .table .cell a:hover,
    .contact-info .table .cell a:active {
      color: #ffffff;
    }

/*  ========== JOE EDITED CODE 2025 ========== */



/* ***** product variant drop down color adjust**** */
.single-option-selector{
  background-color: var(--main-color);
  outline: 1px solid var(--text-color);
  color: var(--text-color);
  text-transform:uppercase;
}

.single-option-selector:hover{
  background-color: var(--main-color);
  outline: 2px solid var(--text-color);
  border: 0px solid var(--text-color);
  color:var(--text-color);
}

select {
  height:35px;
  width: 240px;
  margin-bottom:15px;
  padding: 5px 10px 5px 10px;
  border: 0px solid var(--text-color);
}

product-select-option-0{
  height:30px;
}


/*  ========== S U S T A I N A B I L I T Y   F O O T E R   B L O C K ========== */

div.footerSust{
  background-color:rgba(255,255,255,0.7);
  text-align:center;
  padding:30px 0px 30px 0px;
}

div#sustBlock {
  width: 300px;
  display: inline-block;
  vertical-align:top;
  padding: 0px 10px 0px 10px;
}

div#sustBlock a{
  color: var(--link-secondary);
}
div#sustBlock a:hover{
  color: var(--link-hover);
}



.sustIcon1{  
  background: transparent url(https://cdn.shopify.com/s/files/1/0802/1101/8019/files/NatureIcon.svg?v=1739036552) no-repeat scroll center top;
  height: 50px;
  width: 50px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom:20px
}
.sustIcon2{  
  background: transparent url(https://cdn.shopify.com/s/files/1/0802/1101/8019/files/GlobeIcon.svg?v=1739036552) no-repeat scroll center top;
  height: 50px;
  width: 50px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom:20px
}
.sustIcon3{  
  background: transparent url(https://cdn.shopify.com/s/files/1/0802/1101/8019/files/SocialPostIcon.svg?v=1739036552) no-repeat scroll center top;
  height: 50px;
  width: 50px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom:20px
}


.iconType{
  text-align:center;
}

.sustTitle{
  text-align: center;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 3px;

}


/*  ========== H E R O   I M A G E   B L O C K ========== */

div#heroImage{
  position:relative;
/*  display:none; remove this commment to hide the banner */
}

div#heroCover{
  position:relative;
  background: transparent url(https://cdn.shopify.com/s/files/1/0802/1101/8019/files/AI_Testprint_bkgrnd_1920x1080_5.jpg?v=1690839581) no-repeat scroll center top;
  height: 30vh;
  width:100%;
  background-size: cover;
  background-position: center;

  z-index: -9999; /* brings banner to the background */
  opacity: 0.7; /* OPTIONAL: adjust overlay opacity */
  
}

.heroTitle{
  padding-bottom:20px;
  line-height:1.25em;

}

.heroText{
  position: absolute;
  width:70%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  text-align: center; 
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size:2em;
  color:#ffffff;
}


.footer hr{
  margin: 20px 0!important;
  border: 0!important;
  border-top: 1px solid var(--button-text)!important;
  border-bottom: 0px solid var(--button-text) !important;
}





@media (max-width: 768px) {
    .navbar .nav { flex-direction: column; }  
    .header{
        display: flex;
        flex-direction: column;
        padding: 10px 0px 0px 0px;
    }
   
    /* .header_row{ display: block;} */

    /* center logo - .header_logo{ display: block; background-position: center; margin-left:0; margin-right:auto; float:left;}*/
      .header_logo{ width: 120px;display: block; background-position: left; margin-left:0; margin-right:auto; float:left;}

   
    .header_home{
      display: none;
      flex-direction: column;
      width: 100%;
      text-align: center;
      padding-bottom: 10px;
    }
   
    .logo{height: calc(var(--band-logo-height) * 1.5);}

   /* .link_cart{ width: 100%; text-align: center; padding-top: 20px;}  */
        
}

            
@media (max-width: 460px) {
.navbar .nav > li,
.navbar .nav > li:last-child { margin-right:0;  width:100%;}
}




/*  ========== S U S T A I N A B I L I T Y   F O O T E R   B L O C K ========== */

div.footerSust{
  background-color:transparent;
  text-align:center;
  padding:0px 0px 40px 0px;
}

div#sustBlock {
  width: 290px;
  display: inline-block;
  vertical-align:top;
  padding: 0px 10px 0px 10px;
}

div#sustBlock a{
  color: var(--link-secondary);
}
div#sustBlock a:hover{
  color: var(--text-hover);
}

.sustIcon svg{
  fill:var(--text-color);
}

.sustIcon{  
  height: 50px;
  width: 50px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom:10px
}



.iconType{
  text-align: center;
  font-size: 12px;
  line-height: 15px;
}

.sustTitle{
  text-align: center;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 3px;
  margin-bottom: 0px;

}