/** Shopify CDN: Minification failed

Line 85:2 All "@import" rules must come first
Line 86:2 All "@import" rules must come first

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

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:#ffffff; /* white */
  --text-color:#aab4b3; /* mint green */
  --button-bg-color:#ffffff; /* white */
  --button-text:#aab4b3; /* mint green */
  --button-outline:#aab4b3; /* mint green */
  --button-radius:0px; /* 0px rounded, 30px rounded */
  --button-bg-hover:#aab4b3; /* mint green */
  --button-text-hover:#ffffff; /* white */ 
  --link-main:#aab4b3; /* mint green */
  --link-secondary:#DFc3AA; /* GOLD */
  --link-hover:#DFc3AA; /* GOLD */
  --footer-color:#ffffff; /* white */

  --ai-logo:transparent url(/cdn/shop/files/AI-Logo-Icon_Black.svg?v=1736884363;) no-repeat scroll center top;
  --band-logo:url(/cdn/shop/files/Courtney-Hartman_Logo-Signature_MintGreen.png?v=1757597875);
  --band-logo-height:120px; /* height of top logo */

  --font-chosen:"LatoRegular", sans-serif;
  --font-body:"LatoRegular";


  --font-heading-size:18px;
  --font-heading-size_prod-title: 16px;
  --font-body-size: 14x;
  --font-nav-size: 14x;   /* nav + buttons */

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

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

}


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

*/



/* * * * * *  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-family: OpenSansMedium; src: url(/cdn/shop/files/OpenSans-Medium.ttf?v=1741965746);
    font-family: PolySans; src: url(/cdn/shop/files/PolySans-Slim.woff2?v=1746543470);
    font-family: NeuePlakSemiBold; src: url(/cdn/shop/files/TheBackfires_Neue_Plak_SemiBold.ttf?v=1747251943);
    font-family: Courier; src: url(/cdn/shop/files/CourierPrime-Regular.ttf?v=1752500570);
    font-family: CourierBold; src: url(/cdn/shop/files/CourierPrime-Bold.ttf?v=1752500570);
    font-family: LatoRegular; src: url(/cdn/shop/files/Font_Lato-Regular.ttf?v=1757599558);
  }

  /* 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);
 font-size:var(--font-nav-size);
  
  /* radius for buttons. */
 -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;
     margin-left: 5px;
    
}

.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: 90px;
   margin-top: 0px;
}


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




.logo{
   display: block;
   height: var(--band-logo-height);
   margin-left: 15px;
   background-position: left;
   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);


}






/* * * * * * *  N A V I G A T I O N   * * * * * */

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






/* * * * * * *  H E A D E R   * * * * * */
.header { background: var(--main-color); border-bottom: var(--header-border); padding: 30px 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%; align-items: center; margin-left: auto; margin-right: auto; max-width: 400px;}


/* * * * * * * 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; background-position: left;}

.span3{float:right;margin-right:20px; padding-top: 5px;}
.span6{padding-left:15px;}


/* * * * * * * 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;
   margin-bottom:0;
}

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

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

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

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

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


/* P R O D U C T  V A R I A N T  S E L E C T O R */

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



/* ========== C O N T A C T   I N F O   S E C T I O N  ========== */

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










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





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

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

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

div#sustBlock {
 width: 280px;
 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;
}


/*  ========== M E D I A  B R E A K  P O I N T S ========== */


@media (max-width: 768px) {
   .navbar .nav { flex-direction: column; } 
   .header_home{display: none; flex-direction: column; width: 100%; text-align: center; padding-bottom: 10px;}
 

  /* LEFT-aligned logo  */
    /* .logo{height: calc(var(--band-logo-height) * 1.25); margin-left:0}
    .header{padding:20px 0 0 0;}
    .span6{width:150px; float: left; padding-left:0}
    .span3{width: 100px; padding-top: 11px; height: calc(var(--band-logo-height) * 1.25); margin-right:0} */


  /* CENTER-aligned logo  */

    .logo{height: calc(var(--band-logo-height) * 1.25); margin-left:0; background-position: center;}
    .header{padding:20px 0 0 0;}
    .span6{padding-left:0}
    .span3{
      position: FIXED; TOP: 10PX; RIGHT: 20PX; FLOAT:RIGHT;
      width: 100px; padding-top: 11px; height: calc(var(--band-logo-height) * 1.25); margin-right:0}      
  }


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