/** Shopify CDN: Minification failed

Line 86:1 All "@import" rules must come first
Line 87:1 All "@import" rules must come first
Line 88:1 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:#000000; /* black */
 --text-color:#ffffff; /* white */
 --button-bg-color:#000000; /* black */
 --button-text:#ffffff; /* white */
 --button-outline:#ffffff; /* white */
 --button-radius:0px; /* 0px rounded, 30px rounded */
 --button-bg-hover:#ffffff; /* white */
 --button-text-hover:#000000; /* black */
 --link-main:#FF4040; /* red */
 --link-secondary:#FF4040; /* red */
 --link-hover:#e2de04; /* yellow */
 --footer-color:#000000; /* 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/Bossonics_Logo.jpg?v=1758290676);
 --band-logo-height:100px; /* height of top logo */

 --font-chosen:"lulo-one", sans-serif;
 --font-body:"lulo-one", sans-serif;

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


 --type-style: uppercase; /* 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 Lulo One font-family: "lulo-one", sans-serif; */
 @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%;}
}