/*-------------------
This theme uses Bootstrap v5.1.

It is highly recommended to check out Bootstrap's guiding principles,
strategies, and techniques at https://getbootstrap.com/docs/5.1/extend/approach/
before adding custom styling.

To learn more about Bootstrap v5.1, please check
out https://getbootstrap.com/docs/5.1/getting-started/introduction/.
/*-------------------*/

/*-------------------*/
/* GENERAL */
/*-------------------*/
h1 {
  font-weight 700;
}
h5 {
  font-weight 500;
}
i.fa-external-link-alt {
  vertical-align: text-top;
  margin-left: 2px;
}

/*-------------------*/
/* TOP NAV */
/*-------------------*/

/*-------------------*/
/* HEADER */
/*-------------------*/

/*-------------------*/
/* CATEGORY NAV */
/*-------------------*/

/*-------------------*/
/* CONTENT */
/*-------------------*/
.shop-header-section {
    padding: 60px 20px;
    background-color: #ffffff; /* Or choose a brand color */
}

.shop-title {
    font-size: 4rem;
    font-weight: 800;
    color: #333333;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: -1px;
}

.shop-subtitle {
    font-size: 2rem;
    color: #666666;
    font-style: italic;
    font-weight: 400;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .shop-title {
        font-size: 2rem;
    }
    .shop-subtitle {
        font-size: 1rem;
    }
}
/*-------------------*/
/* PRODUCT THUMBS */
/*-------------------*/
.image-hover-wrapper {
  position: relative;
  display: flex;      
  justify-content: center;
  align-items: center;
  width: 100%;
  overflow: hidden;
  min-height: 200px; 
}

.primary-img {
  display: block;
  width: auto;       
  height: auto;      
  max-width: 100%;  
  transition: opacity 0.5s ease;
}

.hover-img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); 
  
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: 1;
}

.thumbnail-img-container:hover .hover-img {
  opacity: 1;
}
/*-------------------*/
/* PRODUCT */
/*-------------------*/

/*-------------------*/
/* CART/CHECKOUT */
/*-------------------*/
.btn.secondary.outline {
    border: 1px solid #000;
    background: #000;
    color: #FFF;
}
.btn.secondary.outline:hover {
    background: #FFF;
    color: #000;
    border: 1px solid #000;
}
/*-------------------*/
/* FOOTER */
/*-------------------*/
.black-footer {
    background-color: #000000 !important; 
    width: 100% !important;
    padding: 80px 0 !important;
    display: block !important;
}

.black-footer h1.footer-logo-text,
.black-footer h1 {
    color: #ffffff !important; 
    background-color: transparent !important;
    font-size: 5rem;         
    font-weight: 800;
    text-align: center !important;
    margin: 0 auto !important;
    display: block !important;
    -webkit-text-fill-color: #ffffff !important; 
}

.black-footer a {
    color: #ffffff !important;
    text-decoration: none !important;
}

.footer-copyright {
    color: #ffffff !important;
    opacity: 0.6;
    text-align: center !important;
    margin-top: 20px !important;
    display: block !important;
}

@media (max-width: 768px) {
    .black-footer h1.footer-logo-text {
        font-size: 3rem;
    }
}

/*-------------------*/
/* MEDIA QUERIES */
/*-------------------*/
@media screen and (min-width: 661px){

}

@media screen and (max-width: 1200px){

}

@media screen and (max-width: 660px){

}

@media screen and (max-width: 340px){

}