/* CLASSES GLOBAIS, ultima atualizacao: 22/09/2025 00:55, SEMPRE ATUALIZE A DOCUMENTACAO E COLE AQUI DEPOIS O ARQUIVO COMPLETO, Z - ESTILOS E SUAS REGRAS */

        /**
        * D.E.P.10.03 - CSS/styles_global.css
        * Última revisão: 22/10/2025
        * Responsável: Vitor Martini
        */

    /* OVERFLOW */
        .visible {
            overflow: visible
        }
        .overflowHidden {
            overflow: hidden
        }
        .overflowScroll {
            overflow: scroll
        }
        .overflowAuto {
            overflow: auto
        }
        .overflowXHidden {
            overflow-x: hidden
        }
        .overflowYHidden {
            overflow-y: hidden
        }
        .overflowXScroll {
            overflow-x: scroll
        }
        .overflowYScroll {
            overflow-y: scroll
        }
        .overflowXAuto {
            overflow-x: auto
        }
        .overflowYAuto {
            overflow-y: auto
        }
        .clip {
            overflow: hidden;
            clip-path: inset(0);
        }

    /* FIM OVERFLOW */

    /* JUSTIFY E ALIGN */
        .justify { 
            justify-content: space-between
        }
        .justifyStart {
            justify-content: flex-start
        }
        .justifyEnd {
            justify-content: flex-end
        }
        .justifyCenter {
            justify-content: center
        }
        .justifyAround {
            justify-content: space-around
        }
        .alignCenter {
            align-items: center
        }
        .alignStart {
            align-items: flex-start
        }
        .alignEnd {
            align-items: flex-end
        }
        .center {
            text-align: center;
            justify-content: center;
            justify-items: center;
            align-items: center;
        }  
    /* FIM JUSTIFY E ALIGN */

    /* BOX MODELS */
        .boxSizing {
            box-sizing: border-box
        }
        .boxSizingBorder {
            box-sizing: border
        }
        .boxSizingContent {
            box-sizing: content
        }
        .boxSizingPadding {
            box-sizing: padding
        }      
    /* FIM BOX MODELS */

    /* DIMENSOES E FORMAS */
        .w50 {
            width: 50%
        }
        .w100 { 
            width: 100% 
        }
        .h50 {
            height: 50%
        }
        .h100 { 
            height: 100%
        }
        .vw50 {
            width: 50vw
        }
        .vw100 {
            width: 100vw
        }
        .vh50 {
            height: 50vh
        }
        .vh100 {
            height: 100vh
        }
        .radius50 {
            border-radius: 50%
        }
        .ratio {
            aspect-ratio: 1 / 1
        }
        .cover {
            object-fit: cover
        }
        .contain {
            object-fit: contain
        }
        .fill {
            object-fit: fill
        }
    /* FIM DAS DIMENSOES E FORMAS */

    /* EFEITOS */
        .blur {
            backdrop-filter: blur(10px)
        }
        .transparentBackground {
            background: transparent;
            color: inherit;
            transition: color 0.3s ease, transform 0.3s ease;
        }
    /* FIM EFEITOS */

    /* DISPLAY E FLEXIBILIDADE */
        .hidden { 
            display: none
        }
        .flex { 
            display: flex
        }
        .block { 
            display: block 
        }
        .inlineBlock {
            display: inline-block
        }
        .inlineFlex { 
            display: inline-flex 
        }   
        .flex0 { 
            flex: 0 
        }
        .flex1 { 
            flex: 1 
        }
        .flexAuto { 
            flex: auto 
        }
        .flexNone { 
            flex: none 
        }
        .shrink0 { 
            flex-shrink: 0 
        }
        .grow1 { 
            flex-grow: 1 
        }
        .row {
            flex-direction: row
        }
        .rowReverse {
            flex-direction: row-reverse
        }
        .column {
            flex-direction: column
        }
        .relative {
            position: relative
        }
        .absolute {
            position: absolute
        }
        .fixed {
            position: fixed
        }
        .wrap { 
            box-sizing: border-box;
            align-items: stretch;
            flex-wrap: wrap;
        }
        .absoluteCenter {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%)
        }       
        .translate {
            transform: translate(-50%, -50%)
        } 
        .translateX {
            transform: translateX(-50%)
        }
        .translateY {
            transform: translateY(-50%)
        }

    /* FIM DO DISPLAY E FLEXIBILIDADE */

    /* GAPS */
        .gap5 {
            gap: 5px
        }
        .gap10 {
            gap: 10px
        }
        .gap20 {
            gap: 20px
        }
        .gap30 {
            gap: 30px
        }
        .gap40 {
            gap: 40px
        }
        .gap50 {
            gap: 50px
        }
        .gap100 {
            gap: 100px
        }
    /* FIM GAPS */

    /* GRID */
        .grid { 
            display: grid 
        }
        .gridCols1 {
            grid-template-columns: repeat(1, 1fr)
        }
        .gridCols2 {
            grid-template-columns: repeat(2, 1fr)
        }
        .gridCols3 {
            grid-template-columns: repeat(3, 1fr)
        }
        .gridCols4 {
            grid-template-columns: repeat(4, 1fr)
        }
        .gridCols5 {
            grid-template-columns: repeat(5, 1fr)
        }
        .gridCols6 {
            grid-template-columns: repeat(6, 1fr)
        }
        .inlineGrid { 
            display: inline-grid 
        }
    /* FIM GRID */
 
    /* PADDINGS */
        .padding0 { 
            padding: 0 
        }
        .padding5 { 
            padding: 5px 
        }
        .padding10 { 
            padding: 10px 
        }
        .padding20 { 
            padding: 20px 
        }
        .padding30 { 
            padding: 30px 
        }
        .padding40 { 
            padding: 40px 
        }
        .padding50 { 
            padding: 50px 
        }
    /* FIM DOS PADDINGS */

    /* Margins */
        .margin0 { 
            margin: 0 
        }
        .margin5 { 
            margin: 5px 
        }
        .margin10 { 
            margin: 10px 
        }
        .margin20 { 
            margin: 20px 
        }
        .margin30 { 
            margin: 30px 
        }
        .margin40 { 
            margin: 40px 
        }
        .margin50 { 
            margin: 50px 
        }
    /* Fim dos Margins */

    /* Top, Left, Right, Bottom */
        .top0 { 
            top: 0 
        }
        .top5 {
            top: 5px
        }
        .top10 {
            top: 10px
        }
        .top20 {
            top: 20px
        }
        .top30 {
            top: 30px
        }
        .top40 {
            top: 40px
        }
        .top50 {
            top: 50px
        }
        .top50prc {
            top: 50%
        }

        .left0 { 
            left: 0 
        }
        .left5 {
            left: 5px
        }
        .left10 {
            left: 10px
        }
        .left20 {
            left: 20px
        }
        .left30 {
            left: 30px
        }
        .left40 {
            left: 40px
        }
        .left50 {
            left: 50px
        }
        .left50prc {
            left: 50%
        }

        .right0 { 
            right: 0 
        }
        .right5 {
            right: 5px
        }
        .right10 {
            right: 10px
        }
        .right20 {
            right: 20px
        }
        .right30 {
            right: 30px
        }
        .right40 {
            right: 40px
        }
        .right50 {
            right: 50px
        }
        .right50prc {
            right: 50%
        }

        .bottom0 { 
            bottom: 0 
        }
        .bottom5 {
            bottom: 5px
        }
        .bottom10 {
            bottom: 10px
        }
        .bottom20 {
            bottom: 20px
        }
        .bottom30 {
            bottom: 30px
        }
        .bottom40 {
            bottom: 40px
        }
        .bottom50 {
            bottom: 50px
        }
        .bottom50prc {
            bottom: 50%
        }
    /* Fim dos Top, Left, Right, Bottom */

    /* FONTES E TEXTO */
        .negrito {
            font-weight: bold
        } 
        .maiusculo { 
            text-transform: uppercase 
        }
        .minusculo {
            text-transform: lowercase 
        }
        .capitalize { 
            text-transform: capitalize 
        }
        .italico { 
            font-style: italic 
        }
        .semiNegrito { 
            font-weight: 600 
        }
        .fontePequena { 
            font-size: .875rem 
        }
        .fonteGrande { 
            font-size: 1.25rem 
        }
        .noWrap { 
            white-space: nowrap 
        }
        .break { 
            word-break: break-word 
        }    
        .noSelect {
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }
        .selectAll {
            -webkit-touch-callout: all;
            -webkit-user-select: all;
            -khtml-user-select: all;
            -moz-user-select: all;
            -ms-user-select: all;
            user-select: all;
        }
        .elipses {
            width: 100%;
            overflow-wrap: break-word;
            word-break: break-word;
            text-overflow: ellipsis;
        }
        .textoUmaLinha {
            width: 100%;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: normal;
            line-height: 1em;
            max-height: 1em;
        }  
        .textoDuasLinhas {
            width: 100%;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: normal;
            line-height: 1em;
            max-height: 2em;
        }  
        .link {
            text-decoration: none
        }                 
    /* FIM DAS FONTES E TEXTO */

    /* CURSOR */
        .pointerNone { 
            pointer-events: none 
        }
        .pointerAuto { 
            pointer-events: auto 
        }
        .cursor { 
            cursor: pointer
        }
        .cursorNotAllowed { 
            cursor: not-allowed
        }
        .cursorDefault { 
            cursor: default
        }
        .cursorAuto { 
            cursor: auto
        }
        .cursorWait { 
            cursor: wait
        }
        .cursorMove { 
            cursor: move
        }
        .cursorZoomIn { 
            cursor: zoom-in
        }
        .cursorZoomOut { 
            cursor: zoom-out
        }
        .cursorGrab { 
            cursor: grab
        }
        .cursorGrabbing { 
            cursor: grabbing
        }
        .cursorText { 
            cursor: text
        }
        .cursorAllScroll { 
            cursor: all-scroll
        }
        .cursorColResize { 
            cursor: col-resize
        }
        .cursorRowResize { 
            cursor: row-resize
        }        
    /* FIM CURSOR */

    /* Z INDEXES */
        .z0 {
            z-index: 0
        }
        .z10 {
        z-index: 10 
        }
        .z20 {
            z-index: 20
        }
        .z30 {
            z-index: 30
        }
        .z40 {
            z-index: 40
        }
        .z50 {
            z-index: 50
        }
        .z100 {
            z-index: 100
        }
        .z200 {
            z-index: 200
        }
        .z300 {
            z-index: 300
        }
        .z400 {
            z-index: 400
        }
        .z500 {
            z-index: 500
        }
        .z1000 {
            z-index: 1000
        }
        .z9999 {
            z-index: 9999
        }
    /* FIM Z INDEXES */

    /* GLOBAIS ANTIGOS */
            * {margin: 0;padding: 0 ;box-sizing: border-box;  font-family: "roboto", sans-serif; font-weight: 600;font-style: normal;}
            body, html {margin: 0;padding: 0;height: 100vh;display: flex;flex-direction: column; background: #dedede;}

            .borderNone {border: none;}
            .transitionBg3 {transition: background 0.3s;}

        /* CARD PRODUTOS INDEX */
            .nomeprodutoo, .nomeproduto {word-wrap: break-word; overflow-wrap: break-word; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;}
            .grid-item {box-sizing: border-box; align-items: stretch;  display: flex; flex-wrap: wrap;}
            .tabelaprod2 {overflow: hidden; white-space: nowrap;text-overflow: ellipsis;}

        /* CAROUSEL PRODUTOS RELACIONADOS E DEMAIS */
            .carousel-inner {display: flex;transition: transform 0.5s ease;}

        /* TOGGLE DARK/LIGHT */
            #toggle-theme, #increase-font, #decrease-font {padding: 5px 10px;font-size: 16px;cursor: pointer;}
            .toggle-container {width: 70px;height: 30px;border-radius: 25px;cursor: pointer;overflow: hidden; transition: background 0.5s}
            body.light-mode .toggle-container {background: url('../../uploads/sistema/menu/toggle_light.webp') no-repeat center center;background-size: cover; box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2), inset -1px -1px 2px rgba(229, 244, 255, 0.8), inset 1px 1px 2px rgba(28, 60, 87, 0.8)}
            body.dark-mode .toggle-container {background: url('../../uploads/sistema/menu/toggle_dark.webp') no-repeat center center;background-size: cover; box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2), inset -2px -2px 2px rgba(255, 255, 255, 0.94), inset 2px 2px 3px rgba(0, 0, 0, 0.8);}
            .toggle {width: 80px; height: 30px; position: absolute; display: flex; align-items: center; justify-content: space-between;}
            .sun, .moon {width: 27px;height: 27px;border-radius: 50%;position: absolute;transition: all 0.5s ease;}
            .sun {background: rgba(255, 200, 0);left: -8px;top: -4px;box-shadow: 0px 0px 2px rgba(255, 255, 255, 0.8), inset -2px -2px 2px rgba(119, 98, 58, 0.58);}
            .moon {background: lightgray;box-shadow: 0px 0px 1px rgba(255, 255, 255, 0.8), inset -2px -2px 1px rgba(105, 105, 105, 0.58);right: 42px;top: -4px;transform: scale(0);}
            .dark-mode .sun {transform: scale(0);}
            .dark-mode .moon {transform: scale(1);}

        /* APARENCIA CABEÇALHO */
            .product-image {width: 100px;height: auto;aspect-ratio: 1 / 1;object-fit: cover;}
            .search-link{justify-content: left; text-align: left ;align-items: center; display: flex; border: 1px solid #ccc; width: 100%;}
            .product-info {display: flex; margin-bottom: 10px; justify-content: center; align-items: center;}
            .product-details {flex-grow: 1;}
            .search-results {position: relative;}
            .search-results li {cursor: pointer;width: 100%;list-style: none; padding: 5px;box-sizing: border-box;}

        /* APARENCIA MODAL */
            .fundo-blur {background: rgba(255, 255, 255, 0.5);backdrop-filter: blur(10px);z-index: 1; }
            .transparent-background {background: transparent; display: flex; align-items: center;color: inherit;cursor: pointer;margin:0;padding:0;transition: color 0.3s ease, transform 0.3s ease;}
            .transparent-background:hover {transform: scale(1.05); color: #aaa}

        @media(max-width:1100px){
            /* GLOBAL */
            .geral{padding-left: 15px;padding-right: 15px;}   
            .geral2 {padding-left: 15px;padding-right: 15px;}   
            .close{right: 20px; width: 50px;margin-right : 1px; top: 6%}
            .hiddenmovel{display: none; }
            .margina{margin: 15px 0px 15px 0px ;}

            /* PRODUTO */
            .text-with-stars {align-items: center; justify-content: space-between;margin-left: 10px;margin-right: 10px;}
            .carousel {position: relative;width: 100%;display: flex;overflow: hidden;}
            .carousel .main-image {position: relative;display: flex;justify-content: center;align-items: center;}
            .thumbnail {width: 13vw;height: auto;object-fit: cover; aspect-ratio: 1 / 1; margin: 5px; padding: 0px;  }

            /* CABEÇALHO */
            .search-results {position: absolute;top: 60px;z-index: 5;display: none; width: calc(100% - 20px);justify-content: center;} 

            /* CARD PRODUTOS INDEX */
            .grid-container { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; }
            .grids, .grid-item { flex: 0 0 42vw; margin: 5px 0px 5px 0px;  }
            .tabelaprod{height: 5px;}
            .tabelaprod2 {height: 50px;}
            .promosem{font-size: 0.8rem;}
            .promo{font-size: 0.8rem;}
            .precobom{font-size: 1.3rem;}
            .nomeproduto {font-size: 1.4rem;}

        }

        @media (min-width:1101px){
            .geral{padding: 0px 10% 0px 10%;}
            .geral2 {padding: 0px 10% 0px 10%;}
            .flexpc { display: flex; }
            .close{right: 50px; width: 50px;margin-right : 1%; top: 1%;}

            /* PRODUTO */
            .text-with-stars {display: flex;align-items: center; justify-content: space-between;margin-left: 20px;margin-right: 20px;}
            .carousel {display: flex;flex-direction: row;justify-content: space-between;align-items: center;flex: 1;}
            .carousel .main-image {position: relative;}
            .thumbnail {width: 100px;height: 100px;object-fit: cover;margin: 10px 0;cursor: pointer;}
            .fotoswithpreco {display: flex;align-items: center; justify-content: space-between;}

            /*CABECALHO*/
            .search-results {position: absolute;top: 80px;z-index: 5;display: none; width: calc(100% - 20px);justify-content: center;} 

            /*CARD PRODUTOS INDEX*/
            .grids, .grid-item { flex: 0 0 12.6vw;  margin: 5px 0px 5px 0px; }
            .tabelaprod{height: 10px;}
            .tabelaprod2 {height: 80px; }
            .tabelaprod1 {height: 30px;} 
            .promosem{font-size: 1rem;}
            .promo{font-size: 1rem;}
            .precobom{font-size: 1.4rem;} 
            .nomeproduto {font-size: 1.4rem;}

        }

    /* FIM DAS CLASSES GLOBAIS ANTIGAS */