/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification
for details on configuring this project to bundle and minify static web assets. */

/*.boxCover {
    margin-bottom: 2rem;*/ /* Aumenta espaçamento entre as linhas */
/*}*/

a.navbar-brand {
  white-space: normal;
  text-align: center;
  word-break: break-all;
}



.container {
    margin: 2em 0;
}

.zoom {
    transition: transform .2s; /* Animation */
    margin: 0 auto;
}

    .zoom:hover {
        transform: scale(1.08); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
    }

.div-centered {
    text-align: left;
    margin: auto;
    width: 200px;
    margin-top:5px!important;
}

body {
    /* Margin bottom by footer height */
   /* margin-bottom: 220px;*/
  
}




/* Altura mínima do carousel no mobile */

@media (max-width: 576px) {
    #carousel .carousel-item img {
        height: 120px;
        /*object-fit: cover;*/
        width: 100%;
    }
}







.topbar {
    height: 39px;
    max-height: 39px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.topbar__bg {
    position: absolute;
    inset: 0;
    background: #fff;
    box-shadow: inset 0 -1px 0 #eee;
}

.topbar__logo {
    position: relative;
    height: 100%;
    display: block;
    z-index: 1;
}

    .topbar__logo img {
        height: 100%;
        width: auto;
        display: block;
        object-fit: contain;
        object-position: center;
    }



/*
####################################################
M E D I A  Q U E R I E S
####################################################
*/

/*
::::::::::::::::::::::::::::::::::::::::::::::::::::
Bootstrap 4 breakpoints
*/
@media (max-width: 544px) {
    h1 {
        font-size: 1.5rem;
    }
    h5 {
        font-size: 1.25rem;
    }
    h6 {
        font-size: 0.8rem;
    }
    a {
        font-size: 14px;
    }
    p {
        font-size: 14px;
    }
    .txtBtn {
        font-size: 12px;
        
    }
    .imgCover {
        max-width: 137px !important;
        max-height: 197px !important;
    }

    .boxCover {
        /*max-width: 138px !important;*/
        width: calc(50vw - 50px);
        max-height: 380px !important;
        margin:20px auto;
    }
    .authorBox {
        min-width:150px;
        min-height:150px;
        margin-right: 20px;
        max-width: 300px;
        border: 1px solid black;
    }
    .travessalogo {
        overflow: auto;
        display: flex;
    }
    .card {
        text-align: center !important;
        justify-content: center !important;
    }
    .txtRedBoldTitulo {
        color: #990000;
        font-family: Garamond;
        font-weight: bold;
        font-size: 1rem;
    }
    .cover {
        max-width: 100%;
        max-height: 50vh;
        margin: 20px auto 40px auto;
        height: auto;
        display: block;
    }

}
@media (max-width: 754px) {
    h1 {
        font-size: 1.5rem;
    }
    h5 {
        font-size: 1.0rem;
    }
    h6 {
        font-size: 0.8rem;
    }
    a {
        font-size: 14px;
    }
    p {
        font-size: 14px;
    }
    .txtBtn {
        font-size: 14px;
    }
    /*1rem = 16px*/
 /*   .imgCover {
        max-width: 137px !important;
        max-height: 197px !important;
    }

    .boxCover {
        max-width: 138px !important;
        max-height: 380px !important;
    }*/
    .travessalogo {
        overflow: auto;
        display: flex;
    }
    .authorBox {
        min-width: 150px;
        min-height: 150px;
        margin-right: 20px;
        max-width: 300px;
        border: 1px solid black;
    }
    .card {
        text-align: center !important;
        justify-content: center !important;
    }
    .cover {
        max-width: 100%;
        max-height: 50vh;
        margin: 20px auto 40px auto;
        height: auto;
        display: block;
    }

   
}

/* Small devices (landscape phones, 544px and up) */
@media (min-width: 544px) {
    h1 {
        font-size: 1.5rem;
    }
    h5 {
        font-size: 1.0rem;
    }
    h6 {
        font-size: 0.8rem;
    }
    a {
        font-size: 1rem;
    }
    p {
        font-size: 14px;
    }
    .txtBtn {
        font-size: 12px;
    }
    .authorBox {
        min-width: 150px;
        min-height: 150px;
        margin-right: 20px;
        max-width: 300px;
        border: 1px solid black;
    }
    .travessalogo {
        overflow: auto;
        display:flex;
        /*   left:100px;
        
        position:relative;*/
    }
    .txtRedBoldTitulo {
        color: #990000;
        font-family: Garamond;
        font-weight: bold;
        font-size: 0.8rem;
    }
    .cover {
        max-width: 100%;
        max-height: 50vh;
        margin: 20px auto 40px auto;
        height: auto;
        display: block;
    }
}

 /*Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint*/ 
@media (min-width: 768px) {
    h1 {
        font-size: 1.5rem;
    }
    h5 {
        font-size: 1.0rem;
    }
    h6 {
        font-size: 0.8rem;
    }
    .authorBox {
        min-width: 150px;
        min-height: 150px;
        margin-right: 20px;
        max-width: 300px;
        border: 1px solid black;
    }
    p {
        font-size: 14px;
    }
    .txtBtn {
        font-size: 14px;
    }
    .travessalogo {
        overflow: auto;
        display: flex;
    }
  /*  .imgCover {
        max-width: 146px !important;
        max-height: 180px !important;
    }

    .boxCover {
        max-width: 180px !important;
        max-height: 380px !important;
    } */
    .txtRedBoldTitulo {
        color: #990000;
        font-family: Garamond;
        font-weight: bold;
        font-size: 0.9rem;
    }
    .cover {
        max-width: 100%;
        max-height: 50vh;
        margin: 20px auto 40px auto;
        height: auto;
        display: block;
    }
}

 /*Large devices (desktops, 992px and up)*/ 
@media (min-width: 992px) {
    h1 {
        font-size: 2.5rem;
    }
    h5 {
        font-size: 1.5rem;
    }
    h6 {
        font-size: 0.8rem;
    }
    .txtBtn {
        font-size: 14px;
    }
    .travessalogo {
    /*    position:absolute;
        top:0px;
        bottom:0px;
        margin:auto;
        left:240px;  */ 
        
     /*   left:100px;
        
        position:relative;*/
    }

    .txtRedBoldTitulo {
        color: #990000;
        font-family: Garamond;
        font-weight: bold;
        font-size: 1rem;
    }
}

 /*Extra large devices (large desktops, 1200px and up)*/ 
@media (min-width: 1210px) {
 /*   .travessalogo {
        position: ;
        top: 0px;
        bottom: 0px;
        margin: auto;
        left: 245px;
     
    }*/
   /* h1 {
        font-size: 3rem;
    }*/
/*    .imgCover {
        max-width: 156px;
        max-height: 234px;
    }

    .boxCover {
        max-width: 200px;
        max-height: 420px;
    } */
    .txtRedBoldTitulo {
        color: #990000;
        font-family: Garamond;
        font-weight: bold;
        font-size: 1.25rem;
    }
}

/*
::::::::::::::::::::::::::::::::::::::::::::::::::::
Custom media queries
*/

/* Set width to make card deck cards 100% width */
/*@media (min-width: 950px) and (max-width:1100px) {
    h1 {
        font-size: 2.75rem;
        color: red;
    }
}*/

/*
Removes white gap between slides - chagnge to base color of slide images
*/
.carousel {
    background: #007aeb;
}


.carousel-item .img-fluid {
    width: 100%;
}


.carousel-item a {
    display: block;
    width: 100%;
}


.border-top {
  border-top: 1px solid #e5e5e5;
}
.border-bottom {
  border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
  box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

button.accept-policy {
  font-size: 1rem;
  line-height: inherit;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
    position: relative;
    min-height: 100%;
    
}


#paddheader {
    min-height: 80rem;
    padding-top: 5rem;
}

@media (max-width: 768px) {
    #sidebar-wrapper {
        min-height: 80rem; /* Definindo a altura mínima para o cabeçalho */
        padding-top: 5rem; /* Ajustando o espaçamento superior */
    }
}


/* Para iPads e dispositivos móveis (até 768px de largura) */
@media screen and (max-width: 768px) {
    #paddheader {
        min-height: 80rem; /* Definindo a altura mínima para o cabeçalho */
        padding-top: 8rem; /* Ajustando o espaçamento superior */
    }

    .container {
        margin: 0 !important; /* Removendo margens extras */
    }

}

/* Para tablets mais largos (exemplo: iPad Pro em modo retrato) */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    #paddheader {
        min-height: 80rem; /* Um cabeçalho maior para tablets maiores */
        padding-top: 8rem; /* Mais espaçamento superior */
    }
}


@media screen and (max-width: 768px) {
    #paddheader {
        min-height: 80rem;
        padding-top: 8rem;
    }
    .container {
        margin: 0 !important;
    }


}
a {
    color: #990000;
    text-decoration: none;
    background-color: transparent;
}

    a:hover {
        color: #990000;
        text-decoration: underline;
    }

.RedTravessa {
    color: #990000;
}
.txtCarrinhoBold {
    color: #990000;
    font-family: Garamond;
    font-weight: bold;
}
.txtCarrinho {
    color: #990000;
 
}
/*.txtRedBoldTitulo {
    color: #990000;
    font-family: Garamond;
    font-weight: bold;
    font-size: 1.25rem;
}*/
.txtEucanaa {
    color: #990000;
    font-family: Garamond;
    font-style: italic;
    font-size: 1.25rem;
}
.txtRedSpan {
    color: #990000;
    font-family: Garamond;
    font-size: 1.25rem;
}
.txtRedBoldSpan {
    color: #990000;
    font-family: Garamond;
    font-weight: bolder;
    font-size: 1.25rem;
}
.txtRedBoldSpanGradient {
    color: #990000;
    font-family: Garamond;
    font-weight: bolder;
    font-size: 1.25rem;
    font-weight: bold;
    text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);
}

txtRedBoldSpanGradient2 {
    color: #990000;
    font-family: Garamond;
    font-weight: bolder;
    font-size: 1.25rem;
    background: -webkit-linear-gradient(#eee, #990000);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.txtTituloForm {
    font-size: 1.25rem;
    font-family: Garamond;
    font-weight: bold;
}
.txtDescricao {
    font-family: Garamond;
  
}
.txtDescricaoBold {
    font-family: Garamond;
    font-weight: bold;
}
.numberSpaccing{
    letter-spacing:1px;
}

/*div.body-content {*/
    /** Essa margem vai evitar que o conteudo fique por baixo do rodapé **/
    /*margin-bottom: 40px;
}*/
/*div.main {
    margin-bottom: 40px;
}
*/
.footer {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 1rem;
    background-color: #efefef;
    text-align: center;
    margin-top:5rem;    
}

.search-form .form-group {
    float: right !important;
    transition: all 0.35s, border-radius 0s;
    width: 32px;
    height: 32px;
    background-color: #fff;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
    border-radius: 25px;
    border: 1px solid #ccc;
}

    .search-form .form-group input.form-control {
        padding-right: 20px;
        border: 0 none;
        background: transparent;
        box-shadow: none;
    }

        .search-form .form-group input.form-control::-webkit-input-placeholder {
            display: none;
        }

        .search-form .form-group input.form-control:-moz-placeholder {
            /* Firefox 18- */
            display: none;
        }

        .search-form .form-group input.form-control::-moz-placeholder {
            /* Firefox 19+ */
            display: none;
        }

        .search-form .form-group input.form-control:-ms-input-placeholder {
            display: none;
        }

    .search-form .form-group:hover,
    .search-form .form-group.hover {
        width: 100%;
        border-radius: 4px 25px 25px 4px;
    }

    .search-form .form-group span.form-control-feedback {
        position: absolute;
        top: -1px;
        right: -2px;
        z-index: 2;
        display: block;
        width: 34px;
        height: 34px;
        line-height: 34px;
        text-align: center;
        color: #3596e0;
        left: initial;
        font-size: 0.875rem;
    }

h6 {
    color: #990000;
}

h1 {
    color: #990000;
    padding: 10px 0 10px 0;
    font-family: Garamond;
}
#sidebar-container {
    min-height: 100vh;
    background-color: #333;
    padding: 0;
}

/* Sidebar sizes when expanded and expanded */
.sidebar-expanded {
    width: 230px;
}

.sidebar-collapsed {
    width: 60px;
}

/* Menu item*/
#sidebar-container .list-group a {
    height: 50px;
    color: white;
}

/* Submenu item*/
#sidebar-container .list-group .sidebar-submenu a {
    height: 45px;
    padding-left: 30px;
}

.sidebar-submenu {
    font-size: 0.9rem;
}

/* Separators */
.sidebar-separator-title {
    background-color: #333;
    height: 35px;
}

.sidebar-separator {
    background-color: #333;
    height: 25px;
}

.logo-separator {
    background-color: #333;
    height: 60px;
}

/* Closed submenu icon */
#sidebar-container .list-group .list-group-item[aria-expanded="false"] .submenu-icon::after {
    content: " \f0d7";
    font-family: FontAwesome;
    display: inline;
    text-align: right;
    padding-left: 10px;
}
/* Opened submenu icon */
#sidebar-container .list-group .list-group-item[aria-expanded="true"] .submenu-icon::after {
    content: " \f0da";
    font-family: FontAwesome;
    display: inline;
    text-align: right;
    padding-left: 10px;
}

/*collapse sidebar*/
/* The sidebar menu */
.sidebar {
    height: 100%;  
    width: 0;  
    position: fixed; 
    z-index: 1;  
    top: 0;
    left: 0;
    background-color: #111; 
    overflow-x: hidden;  
    padding-top: 60px;  
    transition: 0.5s;  
}

    /* The sidebar links */
    .sidebar a {
        padding: 8px 8px 8px 32px;
        text-decoration: none;
        font-size: 25px;
        color: #818181;
        display: block;
        transition: 0.3s;
    }

        /* When you mouse over the navigation links, change their color */
        .sidebar a:hover {
            color: #f1f1f1;
        }

    /* Position and style the close button (top right corner) */
    .sidebar .closebtn {
        position: absolute;
        top: 0;
        right: 25px;
        font-size: 36px;
        margin-left: 50px;
    }

/* The button used to open the sidebar */
.openbtn {
    font-size: 20px;
    cursor: pointer;
    background-color: #111;
    color: white;
    padding: 10px 15px;
    border: none;
}

    .openbtn:hover {
        background-color: #444;
    }
.icon-red-color {
    color: #990000;
}

.bi-menu-down:hover {
    color: #990000;
}
.bi-menu-up:hover {
    color: #990000;
}

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
    transition: margin-left .5s; 
    padding: 20px;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
    .sidebar {
        padding-top: 15px;
    }

        .sidebar a {
            font-size: 18px;
        }
    .card {
        text-align: center !important;
        justify-content: center !important;
    }
}
.breadcrumb-item > a {
    color: #990000;
}
.breadcrumb-item > .active a {
    color: #990000;
    font-weight: bold;
}


@media screen and (max-width: 768px) {
    .travessaTable {
        max-width: 90%;
    }

        .travessaTable th {
            display: none;
        }

        .travessaTable td {
            display: block;
            text-align: left !important;
            padding: 15px;
            border-bottom: 1px solid #ccc;
            position: relative;
        }

            .travessaTable td:last-of-type {
                border: none;
            }

            .travessaTable td > * {
                vertical-align: middle;
            }

            .travessaTable td:before,
            .travessaTable td + td:before {
                content: attr(data-header) ": ";
                font-weight: 600;
                border: none;
                position: relative;
                left: auto;
                height: auto;
                top: 2px;
                width: auto;
                background: transparent;
                display: inline-block;
                margin-right: 15px;
            }

        .travessaTable .remover {
            display: inline-block;
            margin-top: -20px;
        }

        .travessaTable tr + tr {
            border: 1px solid black;
            display: block;
        }

            .travessaTable tr + tr + tr {
                margin: 50px 0;
            }
    .travessaForm .formLine .w40,
    .travessaForm .formLine .w35,
    .travessaForm .formLine .w30,
    .travessaForm .formLine .w25,
    .travessaForm .formLine .w20 {
        width: 50%;
    }

    .travessaForm .formLine .w100,
    .travessaForm .formLine .w70,
    .travessaForm .formLine .w65,
    .travessaForm .formLine .w60,
    .travessaForm .formLine .w50 {
        width: 100%;
    }

        .travessaForm .formLine .w100 label,
        .travessaForm .formLine .w70 label,
        .travessaForm .formLine .w65 label,
        .travessaForm .formLine .w60 label,
        .travessaForm .formLine .w50 label {
            margin-top: 0;
        }

    .travessaForm .formLine {
        flex-wrap: wrap;
    }


        .travessaForm .formLine input {
            width: 100%;
        }

        .travessaForm .formLine label {
            margin-top: 5px;
        }
}

.travessaTableBtn {
    max-width: 100% !important;
    
}

    .travessaTableBtn th {
        display: none;
    }

    .travessaTableBtn td {
        
        
        position: relative;
    }

        .travessaTableBtn td:last-of-type {
            border: none;
        }

        .travessaTableBtn td > * {
            vertical-align: middle;
        }

        .travessaTableBtn td:before,
        .travessaTableBtn td + td:before {
            content: attr(data-header) "";           
            border: none;
            position: relative;
            left: auto;
            height: auto;           
            width: auto;
            background: transparent;
            display: inline-block;
            
        }

    .travessaTableBtn .remover {
        display: inline-block;
        margin-top: 0px!important;
    }

    .travessaTableBtn tr + tr {
        border: 0px none white !important;        
        display: block;
    }

        .travessaTableBtn tr + tr + tr {
            margin: 50px 0;
        }

/* breadcrumb */

.breadcrumbs {
    border: 1px solid #cbd2d9;
    border-radius: 0.3rem;
    display: inline-flex;
    overflow: hidden;
    
}

.breadcrumbs__item {
    background: #fff;
    color: #333;
    outline: none;
    padding: 0.75em 0.75em 0.75em 1.25em;
    position: relative;
    text-decoration: none;
    transition: background 0.2s linear;
}

    .breadcrumbs__item:hover:after,
    .breadcrumbs__item:hover {
        background: #edf1f5;
    }

    .breadcrumbs__item:focus:after,
    .breadcrumbs__item:focus,
    .breadcrumbs__item.is-active:focus {
        background: #323f4a;
        color: #fff;
    }

    .breadcrumbs__item:after,
    .breadcrumbs__item:before {
        background: white;
        bottom: 0;
        clip-path: polygon(50% 50%, -50% -50%, 0 100%);
        content: "";
        left: 100%;
        position: absolute;
        top: 0;
        transition: background 0.2s linear;
        width: 1em;
        z-index: 1;
    }

    .breadcrumbs__item:before {
        background: #cbd2d9;
        margin-left: 1px;
    }

    .breadcrumbs__item:last-child {
        border-right: none;
    }

    .breadcrumbs__item.is-active {
        background: #edf1f5;
    }


.main__img--container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.main__img--card-bio {
    margin: 10px;
   
    background-size: cover;
    background-position: center;
    min-width: 150px;
    min-height: 150px;
    margin-right: 20px;
   /* max-width: 300px;
    max-height:300px;*/
    border: 1px solid black;
}

.lorem {
    width: 90%;
    margin: 0 auto;
}


.fa-long-arrow-right:hover {
    color: #FF0000 !important;
}
.bi-list:hover {
    color: #FF0000 !important;
}

.pagination > li > a {
    background-color: white;
    color: #FF0000;
}

    .pagination > li > a:focus,
    .pagination > li > a:hover,
    .pagination > li > span:focus,
    .pagination > li > span:hover {
        color: #FF0000;
        background-color: #eee;
        border-color: #ddd;
    }

.pagination > .active > a {
    color: white;
    background-color: #FF0000;
    border: solid 1px #FF0000;
}

    .pagination > .active > a:hover {
        background-color: #FF0000;
        border: solid 1px #FF0000;
    }

#overlay {
   /* position: fixed;*/
    bottom: 10px;
    /*z-index: 100;*/
    width: 100%;
    height: 100%;
    display: none;
    background: #eee;
}

.cv-spinner {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 4px #ddd solid;
    border-top: 4px #FF0000 solid;
    border-radius: 50%;
    animation: sp-anime 0.8s infinite linear;
}

@keyframes sp-anime {
    100% {
        transform: rotate(360deg);
    }
}

.is-hide {
    display: none;
}
.card-img-top {
    flex-grow: 1;
    object-fit: contain;
}

.card-body {
    flex-grow: 0;
}
.div-centered {
    text-align: left;
    margin: auto;
    width: 200px;
}

.modal-footer .btn {
    width: 100%;
}
/*.icon-container img {
    height: 30px;*/ /* Defina a altura desejada */
    /*width: auto;*/ /* Mantenha a proporção da largura */
/*}*/

.icon-container img {
    height: 30px; /* Defina a altura desejada */
    width: 30px; /* Defina a largura desejada */
    object-fit: contain; /* Garante que a imagem caiba dentro sem cortar, mantendo a proporção */
}

.product-scroll {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: auto; /* Firefox */
    scrollbar-color: #ccc transparent; /* Firefox */
}

    /* Para Webkit (Chrome, Safari) */
    .product-scroll::-webkit-scrollbar {
        height: 8px;
    }

    .product-scroll::-webkit-scrollbar-thumb {
        background-color: #ccc;
        border-radius: 4px;
    }

    .product-scroll::-webkit-scrollbar-track {
        background: transparent;
    }

.fade-shadow-left, .fade-shadow-right {
    pointer-events: none;
    z-index: 10;
}

.fade-shadow-left {
    background: linear-gradient(to right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
}

.fade-shadow-right {
    background: linear-gradient(to left, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
}
/*Container pagamento fluido usando a pagina toda*/
@media (max-width: 991px) {
    .entrega-container {
        box-sizing: content-box !important;
    }
}
/* Total Pedido Pagamento */
.total-pedido-destaque {
    background-color: #fff3cd; /* amarelo suave */
    padding: 15px;
    border-radius: 8px;
    font-size: 1.3rem;
    font-weight: bold;
    color: #000;
    text-align: right;
    margin-top: 10px;
}
@media (max-width: 768px) {
    /* Se sua regra global é algo como .table td::before { content: attr(data-header) ': '; } */
    .table tr.shipping-row td::before,
    .no-mobile-labels::before,
    .no-mobile-labels[data-header]::before {
        content: "" !important;
        display: none !important;
    }
}
/* Tamanhos mais coerentes no mobile (≤576px) */
@media (max-width: 576px) {
    /* Título "Como deseja receber o seu pedido?" */
    #shippingOptions legend {
        font-size: 1.125rem; /* ~18px */
        line-height: 1.25;
        margin-bottom: .75rem;
        text-align: left; /* evita quebrar feio em telas estreitas */
    }

    /* Card de opção de envio */
    .shipping-option {
        padding: .75rem .75rem 2rem;
        min-height: 90px;
    }

        .shipping-option .icon {
            font-size: 1.25rem;
        }

        .shipping-option strong {
            font-size: 1rem;
        }
        /* "Envio a domicílio" */
        .shipping-option small {
            font-size: .8125rem;
        }
    /* "2–3 dias úteis" */
    .shipping-price {
        font-size: .95rem;
    }
    /* preço no canto direito */

    /* Card da loja (retirada) */
    .store-card .card-title {
        font-size: 1rem;
    }

    .store-card .text-muted {
        font-size: .875rem;
    }
}

/* Alternativa fluida (sem breakpoint): cresce bem até desktop */
#shippingOptions legend {
    font-size: clamp(1.125rem, 1.2rem + 0.3vw, 1.5rem);
}
/* MOBILE (<=768px) — substitua o bloco atual por este */
@media screen and (max-width: 768px) {
    /* só mostra rótulo nos TDs que realmente têm data-header */
    .travessaTable td[data-header]::before {
        content: attr(data-header) ": ";
        font-weight: 600;
        position: relative;
        display: inline-block;
        margin-right: 15px;
        top: 2px;
    }

    /* não gera “: ” nos TDs sem data-header */
    .travessaTable td:not([data-header])::before {
        content: none !important;
        display: none !important;
    }
}
@media screen and (max-width: 768px) {
    .travessaTableBtn td[data-header]::before {
        content: attr(data-header);
    }

    .travessaTableBtn td:not([data-header])::before {
        content: none !important;
        display: none !important;
    }
}
@media (max-width: 575.98px) {

    .artigo-detalhe-page .table th,
    .artigo-detalhe-page .table td {
        display: block;
        width: 100% !important;
        text-align: left !important;
    }

    .artigo-detalhe-page .table th {
        margin-top: 0.5rem;
        font-size: 0.9rem;
        white-space: nowrap;
        vertical-align: top;
        padding-right: .5rem;
    }

    .artigo-detalhe-page .table td {
        margin-bottom: 0.75rem;
        font-size: 0.95rem;
    }

    .artigo-detalhe-page .select-badge-size {
        width: 100% !important;
        max-width: 100% !important;
        font-size: 1rem;
        padding: 0.5rem 0.75rem;
        border: 1px solid #bbb;
        border-radius: 0.4rem;
    }

    .artigo-detalhe-page #lblPorte {
        display: inline-block;
        margin-top: 0.5rem;
        font-size: 1rem;
        padding: 0.4rem 0.8rem;
    }

    .artigo-detalhe-page .btn.btn-danger.w-50 {
        width: 100% !important;
        font-size: 1.1rem;
        padding: 0.75rem;
    }

}
/* Desktop (>=576px): select e preço lado a lado, alinhados à esquerda */
@media (min-width: 576px) {

    /* esse é o wrapper que contém o select + lblPorte */
    .artigo-detalhe-page .porte-row {
        display: flex;
        flex-direction: row; /* garante lado a lado */
        flex-wrap: nowrap; /* evita quebra de linha */
        align-items: center;
        justify-content: flex-start; /* força tudo a começar no canto esquerdo */
        text-align: left; /* caso a <td> tenha text-align:right */
    }

    /* bloco do select */
    .artigo-detalhe-page .porte-select {
        flex: 0 0 auto; /* largura só o necessário */
    }

    /* o preço (badge) grudado no select */
    .artigo-detalhe-page #lblPorte {
        flex: 0 0 auto;
        margin-left: .5rem !important; /* espacinho lateral */
        margin-top: 0 !important; /* tira o mt-2 que você usa no mobile */
        text-align: left !important; /* impede alinhamento à direita interno */
    }
}
@media (min-width: 768px) {
    .shipping-card__select {
        max-width: 420px;
    }
}

/* SELECT: largura total, espaço à direita p/ caret, sem cortar preço */
#cardHome .shipping-home-select {
    width: 100%;
    /* evita zoom do iOS quando o select recebe foco */
    font-size: 16px;
    /* mais espaço à direita p/ o ícone/caret não cobrir texto/preço */
    padding-right: 2.75rem;
    /* se usa caret via background-image: reposiciona no mobile */
    background-position: right .75rem center !important;
    background-size: 12px !important;
}

/* Título/descrição encostados à esquerda e com respiro */
#cardHome .shipping-home-body {
    text-align: left;
}

#cardHome .shipping-home-selectblock {
    margin-top: .5rem;
}

/* Linha de preço abaixo do select — só no mobile */
#mobilePriceLine {
    display: none;
    font-size: .95rem;
    margin-top: .375rem;
}

    #mobilePriceLine .label {
        color: #6c757d;
        margin-right: .25rem;
    }

    #mobilePriceLine .value {
        font-weight: 700;
    }

/* Em telas até 576px, mostramos a linha extra de preço */
@media (max-width: 576px) {
    #mobilePriceLine {
        display: flex;
        align-items: baseline;
    }
    /* opcional: no mobile o preço do canto pode ser redundante; comente se quiser esconder */
    /* #cardHome .shipping-price { display:none; } */
}
/* HEADER: layout estável em notebook/tablet/desktop */
#head-navbar .headbar {
    gap: .5rem;
}

#head-navbar .headbar__left,
#head-navbar .headbar__right {
    flex: 0 0 auto;
}

/* a marca ocupa o meio e pode encolher sem estourar */
#head-navbar .headbar__brand {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* importante: permite a imagem encolher dentro do flex */
#head-navbar .navbar-brand {
    min-width: 0;
}

/* logo responsiva (não precisa min-width inline) */
#head-navbar .travessalogo {
    height: 39px;
    width: auto;
    max-width: clamp(160px, 40vw, 520px);
    object-fit: contain;
}

/* um pouco menor em telas mais apertadas */
@media (max-width: 991.98px) {
    #head-navbar .travessalogo {
        height: 32px;
    }
}

.btn-ver-mais {
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: .25rem;
}

/* Card: ajuda a manter o botão sempre no lugar */
.art-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Link do conteúdo não “engole” o botão */
.art-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

/* Botão Comprar: consistente e sem quebra */
.txtBtn {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    white-space: nowrap;
    line-height: 1;
    padding: .5rem .6rem;
    min-height: 36px; /* deixa todos iguais */
}

    .txtBtn i {
        margin: 0; /* remove efeitos do mr-1/margens variáveis */
    }

.title-fixed-height {
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Limita a 2 linhas */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 3rem; /* Ajuste para garantir altura consistente */
}


/* Em telas mais apertadas (tablet), reduz levemente */
@media (max-width: 1199.98px) {
    .txtBtn {
        font-size: .85rem;
        padding: .45rem .55rem;
        min-height: 34px;
    }
}
/* Variante: não ocupar 100% (usado na busca/lista) */
.txtBtn--inline {
    width: auto;
    display: inline-flex;
}

/* No mobile, pode voltar a 100% se você quiser */
@media (max-width: 575.98px) {
    .txtBtn--inline {
        width: 100%;
    }
}
/*busca-Refinada*/
/* Chips */
/* =========================
   Travessa PT - Busca (Bootstrap 4)
   ========================= */

/* Chips */
.travessa-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: 12px 0 10px;
}
.travessa-chip {
    display: inline-flex;
    align-items: center;
    gap: .5rem; /* <-- cria o respiro entre texto e X */
    padding: .45rem .75rem;
    border-radius: 14px;
    border: 1px solid rgba(0,0,0,.18);
    background: #f3f3f3;
    color: #111;
    font-size: 16px;
    line-height: 1;
    white-space: nowrap;
}

    /* texto não encosta no X mesmo em quebra */
    .travessa-chip .chip-text {
        display: inline-block;
    }

    /* X com área clicável e alinhamento */
    .travessa-chip .chip-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        line-height: 1;
        font-weight: 700;
        font-size: .9rem;
        opacity: .7;
    }

    /* hover: deixa claro que remove */
    .travessa-chip:hover .chip-close {
        opacity: 1;
        background: rgba(220,53,69,.12);
    }


/* Linha do total (sempre separada) */
.busca-total-linha {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 14px;
}

.busca-total-label {
    font-size: 16px;
    color: #333;
}

.busca-total-valor {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 34px;
    padding: 0 12px;
    border-radius: 9999px;
    background: #111;
    color: #fff;
    font-weight: 700;
    font-size: 16px;
}

/* Linha do botão (sempre separada) */
.busca-botao-linha {
    margin-bottom: 18px;
}

/* Desktop: não mexe no alinhamento (deixa o layout atual) */
.btn-refinada {
    /* sem alterações no desktop */
}

/* Mobile: alinhar à esquerda mesmo que o container tenha text-center */
@media (max-width: 576px) {
    .busca-botao-linha {
        text-align: left !important;
    }

    .btn-refinada {
        display: inline-flex;
        justify-content: flex-start;
    }

    .travessa-chip {
        height: 38px;
        padding: 0 12px;
        font-size: 14px;
        border-radius: 12px;
    }

    .busca-total-label {
        font-size: 14px;
    }

    .busca-total-valor {
        font-size: 14px;
        height: 30px;
    }
}

.busca-resumo-topo {
    margin: 8px 0 10px;
}

.busca-resumo-count {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.busca-resumo-count__value {
    font-size: 28px;
    font-weight: 800;
    color: #111;
    line-height: 1;
}

.busca-resumo-count__label {
    font-size: 16px;
    color: #444;
}
/* Botão: alinhar ícone e texto */
.btn-refinada {
    display: inline-flex;
    align-items: center;
    gap: 10px; /* espaço entre lupa e texto */
}

/* Ícone: evita “pular” na linha */
.btn-refinada__icon {
    display: block;
    flex: 0 0 auto;
    margin-top: -1px; /* micro-ajuste (pode ser 0 se preferir) */
}

/* Mobile: fonte maior deixa o ícone parecer baixo, ajusta um pouco */
@media (max-width: 576px) {
    .btn-refinada {
        justify-content: flex-start; /* seu requisito */
    }

    .btn-refinada__icon {
        margin-top: 0; /* normalmente fica melhor no mobile */
    }
}

.busca-quick-term{
  font-size: 20px;
  color:#222;
  margin-bottom: 6px;
}
.busca-quick-sep{ color:#999; padding:0 6px; }

.busca-quick-count{
  display:flex;
  align-items:baseline;
  gap:10px;
}
.busca-quick-count__value{
  font-size: 36px;
  font-weight: 800;
  color:#111;
  line-height:1;
}
.busca-quick-count__label{
  font-size: 18px;
  color:#444;
}

.busca-quick-hint{
  margin-top: 8px;
  font-size: 14px;
  color:#666;
}

/* container do resumo */
.busca-resumo-topo {
    padding-left: 0; /* opcional: deixa alinhado com o H1 */
}

/* ✅ espaço entre o count e o termo */
.busca-resumo-count {
    margin-bottom: 12px;
}
.busca-refinada-link {
    font-weight: 700; /* igual strong */
    color: #d40000; /* vermelho do outline-danger */
    text-decoration: underline;
    text-underline-offset: 2px;
}

    .busca-refinada-link:hover {
        color: #b00000;
    }