/* your styles go here */

.debug {
    border: 1px solid red !important;
}

/* for vintage type */
p {
    font-size: 1.2rem !important;
}

.AS-justify {
    text-align: justify; 
}

.AS-overlay-button-shift {
    font-size: 1.1rem;
    transform: translateY(5px);
}

.AS-cart-icon-shift {
    font-size: 1.3rem;
    transform: translateY(5px);
}

.AS-nav-color {
    color: #495057;
}

.AS-modal-close {
    font-size: 1.3rem;
    transform: translateY(5px);
}

.AS-grid-bg {
    background: url('../img/photo/AS-Grid-paper-retouch.jpg');
    background-size: cover;
    background-position: center top;
}

.AS-related-container {
    border: 1px solid black;
    padding: 1rem;
    margin-bottom: 3rem;
}

.nav, .nav-item, .nav-link, .btn {
    font-family: 'franklin-gothic-urw', sans-serif;

}

#product-nav-elements .nav-link {
    font-family: 'metallophile-sp8', sans-serif !important;
    color: black !important;
}

#product-nav-elements .nav-link:hover {
    font-family: 'metallophile-sp8', sans-serif !important;
    color: #3495e7 !important;
}

.navbar-brand {
    font-family: 'franklin-gothic-urw', sans-serif;
    font-weight: 700;

}

/* Selects the total price on Product summary */
.list-inline-item.h4 {
    font-family: 'metallophile-sp8', sans-serif;
}

td {
    padding-right: 10px;
    vertical-align: top;
}

.AS-clarendon-light {
    font-family: 'clarendon-urw-extra-wide', serif;
    font-weight: 300;
    font-style: normal;
}

.AS-clarendon-medium {
    font-family: 'clarendon-urw-extra-wide', serif;
    font-weight: 500;
    font-style: normal;
}

.AS-clarendon-medium-JAD {
    font-family: 'clarendon-urw-extra-wide', serif;
    letter-spacing: -.09rem;
    font-weight: 800;
    font-style: normal;
    color: #00161a;
}

.AS-americane-reg {
    font-family: 'americane-condensed', sans-serif;
    font-weight: 400 !important;
    font-style: normal !important;
    letter-spacing: 1px !important;
    text-transform: uppercase;
}

.AS-americane-large-yellow {
    font-size: calc(1.725rem + 6.0vw) !important;
    font-family: 'americane-condensed', sans-serif;
    font-weight: 400 !important;
    font-style: normal !important;
    color: #f3e924;
    letter-spacing: normal !important;
}

.AS-americane-large {
    font-size: calc(1.725rem + 6.0vw) !important;
    font-family: 'americane-condensed', sans-serif;
    font-weight: 400 !important;
    font-style: normal !important;
    letter-spacing: normal !important;
}

.AS-metallophile-large {
    font-size: calc(1rem + 3.0vw) !important;
    font-family: 'metallophile-sp8', sans-serif;
    font-weight: 400 !important;
    font-style: normal !important;
    letter-spacing: normal !important;
}


.AS-franklin-heavy-ital {
    font-family: franklin-gothic-urw, sans-serif;
    font-weight: 900 !important; 
    font-style: italic !important;
    letter-spacing: normal !important;
}

.AS-to-front {
    z-index: 1;
}

.AS-white-bg {
    background-color: white;
}

/* improves markdown from Fastspring product descriptions */
span h4 {
    margin-top: 25px !important;
}

.AS-loader {
    width: 50px;
}

.AS-album-border {
    border: 5px solid rgb(40, 40, 40);
}

/* YouTube Video styles */

.YT-border {
    /* For some reason this is necessary! */
    border: 1px solid black !important;
}





#AS-featured-products {
    background-image: url('../img/photo/AS-BlueWood.jpg');
    background-size: cover;
}

.AS-ui-image {
    box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.7);
    border: 1px solid #222;
}


.AS-support-image {
    box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.7);
    border: 1px solid #222;
}


.AS-position-relative {
    position: relative;
}

/* .AS-new-sticker {
    position: absolute;
    top: -3rem;
    left: -3rem;
    width: 35%;
} */

/* .AS-new-sticker {
    position: absolute;
    top: -3rem;
    right: -3rem;
    width: 30%;
} */

.AS-new-sticker {
    position: absolute;
    top: -0.4rem;
    right: -0.4rem;
    width: 30%;
}

.AS-paper-bg {
    background-image: url('https://authentic-soundware-images.s3.us-east-1.amazonaws.com/images/Misc_images/AS_craft_paper_tile2.jpg');
}

.AS-caption-label-bg {
    background-image: url(https://authentic-soundware-images.s3.us-east-1.amazonaws.com/images/Misc_images/AS-label_image1.png);
    background-size: cover;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}


.AS-product-nav-link {
    font-family: 'metal', sans-serif;
    font-weight: 400;

}

/* Fade out (applied to a class) */
.hx-fade-out {
    opacity: 1;

}
.hx-fade-out.htmx-swapping {
    opacity: 0;
    transition: opacity 0.2s ease-out;
}

/* UI Image gallery */

/* #ui-image-gallery {
    height: 60vh;
} */

.main-ui-image {
    max-height: 568px;
    box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.7);
    border: 2px solid #222;
}

#thumbnail-container {
    /* border-right: solid 2px rgba(34, 34, 34, 0.8); */
    background-color: rgba(34, 34, 34, 0.2);
}

.ui-thumbnail-wrapper {
    width: fit-content;
    border-bottom: solid 2px rgba(34, 34, 34, 0); /* Use rgba to set opacity */
}


.ui-thumbnail {
    border: solid 1px #222;
    box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.7);
}

.ui-thumbnail:hover {
    opacity: 0.9;
    cursor: pointer;
}


/* Reviews */

.review-source {
    font-style: italic;
}

.review-text {
    line-height: 130%;
} /* look below for media query for small screens */

/* Video stuff */

.AS-video-player {
    position: relative;
    box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.7);
}

.AS-video-player:hover {
    opacity: 0.9;
    transition: all ease-in-out 0.1s;
}


.video-overlay-image {
    height: 60px;
    width: 80px;
    position: absolute;
    bottom: 10px;
    left: 10px;
    opacity: 0;
    transition: opacity 0.5s ease-in-out; /* Smooth transition */

}

/* Add a class via JS to trigger the fade-in */
.video-overlay-image.fade-in {
    opacity: 1; /* Final opacity after fade-in */
}



/* For sections with only one video this constrains the size */
.YT-wrapper {
    width: 100%;
}

@media (max-height: 750px) {
    .YT-wrapper {
        width: 80%;
    }
}

@media (max-width: 500px) {
    .video-overlay-image {
        height: 40px; /* Reduce the height of the overlay image */
        width: 60px; /* Reduce the width of the overlay image */
    }
    
    .bi-youtube {
        height: 30px;
        width: 30px;
    }

    .review-text {
        line-height: 100%;
    } 
}

.fade-out {
    opacity: 0;
    transition: opacity 0.5s ease; /* Adjust duration as needed */
}

/* @media (max-width: 1000px) {
    .ui-thumbnail {
    max-height: 80px;
    }
}

@media (max-width: 800px) {
    .ui-thumbnail {
    max-height: 70px;
    }
}

@media (max-width: 600px) {
    .ui-thumbnail {
    max-height: 60px;
    }
}

@media (max-width: 500px) {
    .ui-thumbnail {
    max-height: 40px;
    }
} */