/** Shopify CDN: Minification failed

Line 113:17 Expected identifier but found whitespace
Line 113:49 Unexpected ";"

**/
/* © Ambient Inks 2025
This file will override styles defined in default_collection_styles.css.
*/


/* change the background color of the whole page */
body {
  color: #ffffff;
  background:#d1b147;
}

/* OPTIONAL:  Add in backgroung 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;
} 

/* If you want to use a font from https://google.com/fonts 
   change the font-family from "Roboto" to whatever the Google font is.
   So if you wanted to use the Google font "Lato", you'd do this:
   font-family:"Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;

   There are 2 places where the Google font is current used. Change both the body and the .btn.

   font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;

*/
body {
  font-family: "Helvetica Neue";
}

/* default link colors */
a:link {
  color: #ffffff;
  text-decoration:none;
}
a:visited {
  color: #ffffff;
  text-decoration:none;
}
a:hover, 
a:active {
  color: #000000;
  text-decoration:none;
}

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

.btn,
.btn:link, 
.btn:visited {
  color: #ffffff;
  text-transform:uppercase;
  font-family:"Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight:700;
  border: solid #000000 1px; /* button border */
  
  /* 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: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
  
  /* Change the button colors, the first value is the top color, second is the bottom color. Also set the background-color value for browsers that dont support gradients. */
  background-color: #000000;
  background-image: -moz-linear-gradient(top, #000000, #000000);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#000000), to(#000000));
  background-image: -webkit-linear-gradient(top, #000000, #000000);
  background-image: -o-linear-gradient(top, #000000, #000000);
  background-image: linear-gradient(to bottom, #000000, #000000);
  
  /* Put ff before the both gradient colors for this one. so #eb7d3c would be #ffeb7d3c */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#000000', GradientType=0);
  
}
  /* 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: #000000;
    background-color: #ffffff;
    border: solid #ffffff 1px; /* hover state border */
  
    background-image: -moz-linear-gradient(top, #ffffff, #ffffff);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#ffffff));
    background-image: -webkit-linear-gradient(top, #ffffff, #ffffff);
    background-image: -o-linear-gradient(top, #ffffff, #ffffff);
    background-image: linear-gradient(to bottom, #ffffff, #ffffff);
    
    /* Put ff before the both gradient colors for this one. so #eb7d3c would be #ffeb7d3c */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ffffff', GradientType=0);
  }
  .btn:active,
  .btn.active {
    background-color: #d1b147 \9;
  }
  
    /* border colors go clockwise: top right bottom left */
    border-color: #d1b147 #d1b147 #d1b147 #d1b147;
  }



/* * * * * * 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:14px; margin-top:15px; }
.link_cart:hover, 
.link_cart:active { text-decoration:none; }
.link_cart .badge {
  background:#ffffff; /* circle color next to cart icon */
  color: #d1b147; /* number color next to cart icon */
  text-shadow:none;
  padding:5px 10px;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
}


/* Change the logo here. Upload an image in Settings > Files, then copy and paste the URL for the background-image */
.logo {
  display:block;
  height: 145px;
  margin-left:0px;
  background-position: center;
  
  background-image:url(/cdn/shop/files/HappyApple_Logo-White.svg?v=1737581348);
}

/* The tooltip pop-out things (when you hover over the Cart link and an orange "Checkout" pop-out appears. */
/* Each of these colors should be the same: */
.tooltip-inner { background-color: #d1b147; }
.tooltip-inner { color: #ffffff; }
.tooltip.right .tooltip-arrow { border-right-color: #ffffff; }
.tooltip.left .tooltip-arrow { border-left-color: #ffffff; }
.tooltip.bottom .tooltip-arrow { border-bottom-color: #ffffff; }

/* Navigation text color. */
.navbar .nav {
  color: #ffffff;
}

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

    
      .navbar .nav {
        display: flex;
        flex-wrap: none;
        justify-content: space-evenly; /* space-between has it go to margins, space-evenly centers them */
/*      letter-spacing: 2px; /* OPTIONAL: space-between letters to match footer links */
      }
    
      navbar .nav > li {
        color: #ffffff;
        margin: 0;
        width: auto;
      }
      
    
    /* Also change the navigation text color here. (should be the same as ".navbar .nav" above. */
      .navbar .nav > li > a {
        color: #ffffff;
        background: transparent; /* Change to hex code if you would like to change nav button color, in both spots */
        border-bottom: #d1b147 3px;
      }
    
    /* 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: #000000;
        text-decoration: none;
        background: transparent; /* Change to hex code if you would like to change nav button color, in both spots */
              
        border-bottom: solid #ffffff 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 #00CFFF;
        -moz-box-shadow: 0 0px 0 #00CFFF;
        box-shadow: 0 0px 0 #00CFFF;
        }
    
    /* nav underline hover effect */
    
      .nav a {
        color: #18272F;
        position: relative;
        text-decoration: none;
        width:100%;
      }
      
      .nav a::before {
        content: '';
        position: absolute;
        width: 100%;
        height: 3px;
        border-radius: 3px;
        background-color: #18272F;
        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);
      }

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

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





/* =================== OPTION 2: OLD NAV WITH BUTTONS =================== */

        /*
          With 4 links in the navigation, use these values: margin-right:.33%; width:24.7%;
          With 5 links in the navigation, use these values: margin-right:.5%; width:19.5%;
        */
        
/*      .navbar .nav > li {
          color: #ffffff;
          background-color: transparent; /* Change to hex code if you would like to change nav button color, in both spots ***HERE*** */
/*        border: 1px solid #ffffff;
          margin-right:.33%;
          width:24.7%;
        }
       
        /* Also change the navigation text color here. (should be the same as ".navbar .nav" above. */
/*        .navbar .nav > li > a {
          color: #ffffff;
          background: transparent; /* Change to hex code if you would like to change nav button color, in both spots ***HERE****/
/*        border: 1px solid #ffffff;
        }
        
        @media (max-width: 460px) {
          .navbar .nav > li,
          .navbar .nav > li:last-child {
            margin-right:0;
            width:100%;
          }
        }

        /* 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: #ffffff;
          text-decoration: none;
          background: #000000; /* Change to hex code if you would like to change nav button color, in both spots */
          
/*        border: 1px solid #000000; /* 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 #00CFFF;
          -moz-box-shadow: 0 0px 0 #00CFFF;
          box-shadow: 0 0px 0 #00CFFF;
        
        }

        

/* ================== END OLD NAV W/ BUTTONS =================== */





/* Change the header background color, and color of the border at the bottom of the header */
.header {
  background: transparent; /* OPTIONAL: Change the header background color, add hex code */
  border-bottom: solid #ffffff 1px; /* OPTIONAL: Change width to 0 to remove */
  padding: 20px 0px 15px 0px;
}


/* * * * * * 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: transparent; /* Collection Page Full Background */
  background-image:none;
}
body.page_product .content {
  background-color: transparent; /* Product Page Full Background */
  background-image:none;
}

/* Product Image Block Background on Collection Pages */
.result {
  background: transparent;  /* Product Image Block Background Set to Transparent.*/
  border-bottom:solid #ffffff 0px; /* Product Image Block Background Underline, Change width to highlight*/
}

/* to remove the border around the products, set border like this */
.results .span4 {
  border: solid #d1b147 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 #ffffff;
     -moz-box-shadow: 0 0px 0 #ffffff;
          box-shadow: 0 0px 0 #ffffff;
}

/* Change the color of the product title. */
.result .title {
  color: #ffffff;
  text-shadow: none;
  text-transform:uppercase;
  font-style:italic;
}

/* 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: #ffffff;
  text-decoration:none;
}

/* Change the color of the product title on hover */
.result .title a:hover,
.result .title a:active {
  color: #000000;
  
}

/* 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: #d1b147;
  border-top: solid #ffffff 0px; /* OPTIONAL: Add border on top of footer block */
}

.footer_ambientmerch_logo {
  background: transparent url(/cdn/shop/files/AI-Logo-Icon_White.svg?v=1736884363) no-repeat scroll center top;
}

/* 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: #ffffff;
  text-decoration:none;
  background: transaprent;
}
/* the color when you hover over one of these links */
.link_block:hover, 
.link_block:active, 
.link_block:focus {
  color: #000000;
  text-decoration:none;
  background: transparent;
}
.footer_ambient-link:hover{
  color:#000000;
}

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



/* * * * * * 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: #ffffff;
  text-shadow:none; /* text has a light gray shadow */
  border-bottom: solid #000000 0px; /* border under product content hidden */
  background: transparent; /* OPTIONAL: change transparent to hex code to add color to block.*/
}

/* Divider line under product title */
.page_content hr{
  border-bottom: solid #ffffff 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 #000000;
}

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

/* The colors for the Twitter and Facebook icons: */
.share_links a:link, 
.share_links a:visited {
  color: #ffffff;
  text-decoration:none;
}
.share_links a:hover, 
.share_links a:active {
  color: #000000;
  text-decoration:none;
}

/* Products You May Like Divider Line */
.related hr {
  border-top: 1px solid #ffffff;
  border-bottom: 0px;
}

/* The heading for the Related items "You might also like:" */
.related h3 {
  color: #ffffff;
  text-transform:uppercase;
  text-shadow:none;
}

/* 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:#d1b147;
      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 ========== */

/* Cart floated to right of nav, logo left aligned */

.span3 {
  float: right;
}



/* ***** product variant drop down color adjust**** */
.single-option-selector{
  background-color: rgba(0, 0, 0, 0);
  outline: 2px solid #ffffff;
  color: #ffffff;
  text-transform:uppercase;
}

.single-option-selector:hover{
  background-color: #ffffff;
  outline: 2px solid #ffffff;
  border: 0px solid #ffffff;
  color:#d1b147;
}

select {
  height:35px;
  width: 240px;
  margin-bottom:15px;
  padding: 5px 10px 5px 10px;
  border: 0px solid #ffffff;
}

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