/**
 * Single Produto - Estilos específicos da página de produto
 */

.single-header .logos-biomas {
    display: flex;
    gap: var(--spacing-gap-small);
    justify-content: center;
}

.single-header .logos-biomas img {
    width: auto;
    height: clamp(22px, 2.5vw, 30px);
    min-height: 22px;
    max-height: 30px;
}


.single-header h1 .title-emphasis {
    color: var(--color-black);
}




/* 

BREADCRUMB TAG

*/


.product-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: clamp(5px, 1.5vw, 20px);
}

.product-breadcrumb a {
    padding: 12px 19px;
    border: 1px solid var(--color-sand);
    color: var(--color-sand);
    border-radius: 50px;
    text-transform: uppercase;
    font-size: 12px;
    line-height: 12px;
    display: inline-flex;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
    pointer-events: none;
}

.product-breadcrumb a.solid { pointer-events: none; }

.product-breadcrumb a.solid, .product-breadcrumb a:hover {
    background-color: var(--color-sand);
    color: var(--color-orange);
}

/* PRODUCT BIOMES */

.product-biomes {
    display: flex;
    flex-direction: column;
}

.product-biomes .single-chips { color: var(--color-sand); }

.product-biomes .content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-gap-large-vertical);
    color: var(--color-sand);
    background-color: var(--color-dark-sand);
    padding: var(--spacing-gap-large-vertical) var(--spacing-wrapper);
}

.product-biomes .content .biome-content {
    display: flex;
    gap: var(--spacing-gap-large);
}

.product-biomes .content .col {
    width: 100%;
    gap: var(--spacing-gap-xsmall);
    display: flex;
    flex-direction: column;
}

.product-biomes .content .col.col-left {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-gap-large);
    justify-content: space-between;
}

.product-biomes .content .col.col-left .col-top {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-gap-small);
}

.product-biomes .content .thumb-biome {
    width: 100%;
   height: auto;
   aspect-ratio: 16/8; 
   border-radius: var(--border-radius-md);
   background-color: var(--color-orange);
   display: flex;
   align-items: center;
   justify-content: center;
}

.product-biomes .content .biome-description p { margin:0; padding:0; color: var(--color-sand); }
.product-biomes .content .col-left .biome-description { display: none; }


.product-biomes .content .thumb-biome img {
    width: 32%;
    height: auto;
    min-width: 170px;
}


/* CATALYST AVATARS */

.biome-catalysts {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.catalyst-avatar {
    width: 15%;
    min-width: 100px;
    max-width: 150px;
    height: auto;
    aspect-ratio: 1/1;
}

.catalyst-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: var(--border-radius-sm);
}

.catalyst-avatar-placeholder {
    width: 100%;
    height: 100%;
    background-color: #675f53;
    display: flex;
    align-items: center;
    justify-content: center;
}

.catalyst-avatar-placeholder span {
    color: var(--color-sand);
    font-family: "Founders Grotesk", sans-serif;
    font-size: 16px;
    font-weight: 500;
    text-transform: uppercase;
    line-height: 1;
}


/* BIO CTA */

.bio-cta {
    display: flex;
    flex-direction: column;
}

.bio-cta .content {
    color: var(--color-sand);
    background-color: var(--color-black);
    gap: var(--spacing-gap-y-small);
    display: flex;
    flex-direction: column;
    padding: var(--spacing-gap-large-vertical) 0;
}

.bio-cta .single-title {
    padding: 0 var(--spacing-wrapper);
}

@media (max-width: 1024px) {
    .product-breadcrumb a {
        padding: 10px 15px;
    }

    .product-biomes .content .biome-content {
        flex-direction: column;
        gap: var(--spacing-gap-xsmall); 
    }


    .product-biomes .content .col-right { order: 1; }
    .product-biomes .content .col-left { order: 2; }
    .product-biomes .content .col-left .biome-description { display: flex; margin-bottom:10px; }
    .product-biomes .content .col-right .biome-description { display: none; }
}


@media (max-width: 768px) {
    .product-breadcrumb {
        margin-top: 0;
    }

    .product-breadcrumb a {
        font-size: 10px;
        line-height: 10px;
    }
}