/* =========================================================
   BROWNIE DO CASAL
   Arquivo principal de estilos

   Organização:
   01. Variáveis / identidade visual
   02. Reset e configurações gerais
   03. Container
   04. Cabeçalho / navegação
   05. Botões
   06. Hero / página inicial
   07. Cardápio / produtos
   08. Destaques
   09. Fidelidade
   10. Formulários
   11. Rodapé
   12. Carrinho
   13. Painel administrativo
   14. Responsividade Tablet
   15. Responsividade Celular
   ========================================================= */


/* =========================================================
   01. VARIÁVEIS / IDENTIDADE VISUAL
   =========================================================

   IMPORTANTE:
   Se futuramente quisermos mudar as cores da marca,
   podemos fazer praticamente tudo por aqui.
   ========================================================= */

:root {
    --bg:#FFF8F0;
    --surface: #fff;

    --ink: #32170f;
    --muted: #7d6258;

    --brown: #4b2418;
    --brown2: #6b3221;

    --cream: #f5e9df;
    --rose: #f2c8c1;

    --line: #eadbd2;

    --success: #2f7d4a;
    --danger: #a2392f;

    --shadow: 0 12px 40px rgba(75, 36, 24, .10);
}


/* =========================================================
   02. RESET E CONFIGURAÇÕES GERAIS
   ========================================================= */

/* Faz padding e bordas entrarem no cálculo das dimensões */
* {
    box-sizing: border-box;
}

/* Rolagem suave */
html {
    scroll-behavior: smooth;
}

/* Configuração principal do site */
body {
    margin: 0;

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        Segoe UI,
        Roboto,
        sans-serif;

    background: var(--bg);
    color: var(--ink);
}

/* Campos e botões usam a mesma fonte do site */
button,
input,
select,
textarea {
    font: inherit;
}

/* Links */
a {
    color: inherit;
    text-decoration: none;
}


/* =========================================================
   03. CONTAINER PRINCIPAL
   ========================================================= */

.container {
    width: min(1180px, calc(100% - 32px));
    margin: auto;
}


/* =========================================================
   4 - CABEÇALHO / MENU
   Mesma cor creme oficial da identidade visual
   ========================================================= */

.topbar{
    position:sticky;
    top:0;
    z-index:50;

    /* Cor oficial do Brand Book */
    background:#FFF8F0;

    /* Removemos transparência para não mudar a cor da logo */
    border-bottom:1px solid #eadbd2;
}

.nav{
    min-height:100px;
    display:flex;
    align-items:center;
    gap:28px;
}


/*
   =========================================================
   LOGO PRINCIPAL
   =========================================================

   Essa é a logo mostrada no cabeçalho do site.

   Para aumentar/diminuir:
   altere principalmente width.

   O object-fit: contain impede a imagem de deformar.
*/
.brand-logo {
    width: 150px;
    height: 150px;

    display: block;

    object-fit: contain;
    object-position: left center;

    flex-shrink: 0;
}


/* Links do menu */
.nav-links {
    margin-left: auto;

    display: flex;
    gap: 24px;
}

.nav-links a{
    font-size:23px;
    font-weight:500;
}

.nav-links a:hover{
    color:var(--brown2);
}


/* Cor quando passa o mouse */
.nav-links a:hover {
    color: var(--brown2);
}


/* Botões do lado direito do menu */
.nav-actions {
    display: flex;
    gap: 10px;
}


/* =========================================================
   05. BOTÕES
   ========================================================= */

/* Estrutura padrão dos botões */
.btn {
    border: 0;
    border-radius: 14px;

    padding: 12px 18px;

    cursor: pointer;

    font-weight: 700;

    transition:
        .2s transform,
        .2s opacity;

    display: inline-flex;
    align-items: center;
    justify-content: center;
}


/* Pequena animação */
.btn:hover {
    transform: translateY(-1px);
}


/* Botão principal */
.primary {
    background: var(--brown);
    color: #fff;
}


/* Botões transparentes */
.outline,
.ghost {
    background: transparent;
    border: 1px solid var(--line);
}


/* Botão creme */
.cream {
    background: var(--cream);
    color: var(--brown);
}


/* Botão de exclusão/cancelamento */
.danger {
    background: var(--danger);
    color: white;
}


/* Botão ocupando toda largura */
.full {
    width: 100%;
}


/* Botão do carrinho */
.cart-btn {
    background: var(--brown);
    color: white;
}


/* Contador do carrinho */
.cart-btn span {
    display: inline-grid;
    place-items: center;

    min-width: 22px;
    height: 22px;

    border-radius: 999px;

    background: #fff;
    color: var(--brown);

    margin-left: 6px;
    padding: 0 6px;
}


/* =========================================================
   06. HERO / PÁGINA INICIAL
   ========================================================= */

/* Espaçamento da primeira seção */
.hero {
    padding: 76px 0 56px;
}


/* Divide texto e imagem em duas colunas */
.hero-grid {
    display: grid;

    grid-template-columns: 1.05fr .95fr;

    gap: 56px;

    align-items: center;
}


/* Texto pequeno acima do título */
.eyebrow {
    display: inline-block;

    font-size: 12px;

    letter-spacing: .18em;

    font-weight: 800;

    color: var(--brown2);

    margin-bottom: 12px;
}


/* Título principal */
.hero h1 {
    font-size: clamp(40px, 6vw, 72px);

    line-height: .98;

    margin: 0 0 20px;

    letter-spacing: -.045em;
}


/* Parte destacada do título */
.hero h1 span {
    color: var(--brown2);
}


/* Texto abaixo do título */
.hero-copy > p {
    font-size: 19px;

    color: var(--muted);

    max-width: 570px;

    line-height: 1.65;
}


/* Botões da página inicial */
.hero-actions {
    display: flex;

    gap: 12px;

    margin: 28px 0;
}


/* Informações rápidas */
.trust-row {
    display: flex;

    gap: 22px;

    flex-wrap: wrap;

    margin-top: 26px;

    color: var(--muted);

    font-size: 14px;
}


.trust-row div {
    display: flex;

    gap: 8px;

    align-items: center;
}


/* =========================================================
   IMAGEM / ILUSTRAÇÃO DO HERO
   ========================================================= */

.hero-visual {
    position: relative;

    min-height: 520px;

    border-radius: 40px;

    background:
        linear-gradient(
            145deg,
            #edd7ca,
            #f8eee7
        );

    overflow: hidden;

    box-shadow: var(--shadow);
}


/* Brownies ilustrativos */
.piece {
    position: absolute;

    width: 180px;
    height: 160px;

    background:
        linear-gradient(
            145deg,
            #3b1a13,
            #6d3522
        );

    border-radius: 24px;

    box-shadow:
        inset 0 8px 0 rgba(255,255,255,.05),
        0 20px 45px rgba(50,23,15,.2);
}


/* Detalhes internos dos brownies */
.piece:before {
    content: "";

    position: absolute;

    inset: 18px;

    border-radius: 18px;

    background:
        radial-gradient(
            circle at 30% 30%,
            #8c4e35 0 6px,
            transparent 7px
        ),

        radial-gradient(
            circle at 70% 60%,
            #8c4e35 0 5px,
            transparent 6px
        ),

        linear-gradient(
            145deg,
            #4a2016,
            #6c3323
        );
}


/* Posição brownie 1 */
.p1 {
    left: 70px;
    top: 90px;

    transform: rotate(-8deg);
}


/* Posição brownie 2 */
.p2 {
    right: 78px;
    top: 130px;

    transform: rotate(10deg);
}


/* Posição brownie 3 */
.p3 {
    left: 190px;
    bottom: 92px;

    transform: rotate(3deg);
}


/* Card flutuante */
.floating-card {
    position: absolute;

    right: 22px;
    bottom: 22px;

    width: 245px;

    background: rgba(255,255,255,.92);

    padding: 18px;

    border-radius: 20px;

    box-shadow: var(--shadow);
}


.floating-card small,
.floating-card span {
    display: block;

    color: var(--muted);
}


.floating-card strong {
    display: block;

    font-size: 22px;

    margin: 5px 0;
}


/* =========================================================
   07. SEÇÕES / CARDÁPIO / PRODUTOS
   ========================================================= */

.section {
    padding: 72px 0;
}


/* Cabeçalho das seções */
.section-head {
    display: flex;

    justify-content: space-between;

    gap: 30px;

    align-items: flex-end;

    margin-bottom: 30px;
}


/* Títulos */
.section h2 {
    font-size: clamp(30px, 4vw, 46px);

    margin: 0 0 8px;
}


.section-head p {
    color: var(--muted);

    margin: 0;
}


/* =========================================================
   FILTROS DE CATEGORIA
   ========================================================= */

.chips {
    display: flex;

    gap: 8px;

    flex-wrap: wrap;
}


.chip {
    border: 1px solid var(--line);

    background: #fff;

    border-radius: 999px;

    padding: 9px 13px;

    cursor: pointer;
}


/* Categoria selecionada */
.chip.active {
    background: var(--brown);

    color: #fff;
}


/* =========================================================
   GRID DE PRODUTOS
   ========================================================= */

.products-grid {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 18px;
}


/* Card individual */
.product-card {
    background: #fff;

    border: 1px solid var(--line);

    border-radius: 24px;

    overflow: hidden;

    box-shadow:
        0 8px 26px rgba(75,36,24,.06);
}


/*
   Área da fotografia do produto.

   As imagens cadastradas pelo painel administrativo
   são exibidas nessa região.
*/
.product-image {
    height: 210px;

    display: grid;

    place-items: center;

    background:
        linear-gradient(
            145deg,
            #ead4c7,
            #f9eee8
        );

    position: relative;

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}


/*
   Brownie padrão mostrado caso determinado produto
   ainda não tenha fotografia.
*/
.mini-brownie {
    width: 120px;
    height: 104px;

    border-radius: 20px;

    background:
        linear-gradient(
            145deg,
            #351711,
            #67311f
        );

    box-shadow:
        0 16px 30px rgba(50,23,15,.22);
}


/* Informações do produto */
.product-body {
    padding: 18px;
}


.product-body h3 {
    margin: 0 0 6px;
}


.product-body p {
    margin: 0;

    color: var(--muted);

    line-height: 1.5;

    min-height: 48px;
}


/* Preço + botão */
.product-bottom {
    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-top: 16px;
}


/* Preço */
.price {
    font-size: 20px;

    font-weight: 800;
}


/* Botão adicionar */
.add-btn {
    border: 0;

    background: var(--brown);

    color: white;

    border-radius: 12px;

    padding: 10px 13px;

    font-weight: 700;

    cursor: pointer;
}


/* =========================================================
   08. ÁREA DE DESTAQUE
   ========================================================= */

.highlight {
    background: var(--brown);

    color: white;

    padding: 56px 0;
}


.highlight-grid {
    display: flex;

    justify-content: space-between;

    gap: 30px;

    align-items: center;
}


.highlight p {
    color: #ead7cf;
}


/* =========================================================
   09. FIDELIDADE
   ========================================================= */

.loyalty-grid {
    display: grid;

    grid-template-columns: 1.05fr .95fr;

    gap: 30px;
}


/* Cards gerais */
.loyalty-card,
.card {
    background: #fff;

    border: 1px solid var(--line);

    border-radius: 24px;

    padding: 24px;

    box-shadow: var(--shadow);
}


/* Cartão fidelidade */
.loyalty-card {
    background:
        linear-gradient(
            145deg,
            #4b2418,
            #6b3221
        );

    color: #fff;
}


/* Quantidade de pontos */
.points strong {
    font-size: 52px;
}


/* Barra de progresso */
.progress {
    height: 10px;

    background: rgba(255,255,255,.2);

    border-radius: 999px;

    overflow: hidden;
}


.progress span {
    display: block;

    height: 100%;

    background: #f6d9cd;
}


/* =========================================================
   10. FORMULÁRIOS
   ========================================================= */

.form-card {
    width: min(560px, calc(100% - 28px));

    margin: 55px auto;

    background: #fff;

    border: 1px solid var(--line);

    border-radius: 26px;

    padding: 28px;

    box-shadow: var(--shadow);
}


/* Títulos dos campos */
label {
    display: block;

    font-weight: 700;

    margin: 14px 0;
}


/* Campos */
.input,
input,
select,
textarea {
    width: 100%;

    margin-top: 7px;

    border: 1px solid var(--line);

    border-radius: 13px;

    padding: 12px 13px;

    background: #fff;

    color: var(--ink);

    outline: none;
}


/* Campo de texto grande */
textarea {
    min-height: 90px;
}


/* Mensagens */
.alert {
    padding: 12px 15px;

    border-radius: 12px;

    margin: 12px 0;

    background: var(--cream);
}


/* Mensagem de erro */
.alert.error {
    background: #f8dedb;

    color: #7d2119;
}


/* Mensagem de sucesso */
.alert.success {
    background: #e3f2e8;

    color: #205b35;
}


/* =========================================================
   11. RODAPÉ
   ========================================================= */

footer {
    border-top: 1px solid var(--line);

    padding: 30px 0;

    color: var(--muted);
}


.footer-grid {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;
}


/*
   Logo do rodapé.

   Agora utiliza corretamente a classe .footer-logo.
*/
.footer-logo {
    width: 220px;
    height: 70px;

    object-fit: contain;
    object-position: left center;
}


/* =========================================================
   12. CARRINHO LATERAL
   ========================================================= */

.drawer {
    position: fixed;

    right: 0;
    top: 0;

    width: min(430px, 100%);

    height: 100dvh;

    background: white;

    z-index: 80;

    transform: translateX(105%);

    transition: .25s;

    display: flex;

    flex-direction: column;

    box-shadow:
        -20px 0 50px rgba(50,23,15,.12);
}


/* Carrinho aberto */
.drawer.open {
    transform: translateX(0);
}


/* Cabeçalho carrinho */
.drawer-head {
    display: flex;

    justify-content: space-between;

    padding: 24px;

    border-bottom: 1px solid var(--line);
}


/* Conteúdo */
.drawer-body {
    padding: 18px 24px;

    overflow: auto;

    flex: 1;
}


/* Rodapé carrinho */
.drawer-footer {
    padding: 20px 24px;

    border-top: 1px solid var(--line);
}


/* Botão X */
.icon-btn {
    border: 1px solid var(--line);

    background: white;

    width: 40px;
    height: 40px;

    border-radius: 12px;

    font-size: 24px;
}


/* Produto dentro do carrinho */
.cart-item {
    display: grid;

    grid-template-columns: 1fr auto;

    gap: 12px;

    padding: 14px 0;

    border-bottom: 1px solid var(--line);
}


/* Controle quantidade */
.qty {
    display: flex;

    gap: 8px;

    align-items: center;
}


.qty button {
    width: 30px;
    height: 30px;

    border: 1px solid var(--line);

    background: white;

    border-radius: 9px;
}


/* Valores */
.summary-row {
    display: flex;

    justify-content: space-between;

    margin: 8px 0;
}


/* Fundo escuro quando carrinho abre */
.backdrop {
    position: fixed;

    inset: 0;

    background: rgba(35,16,11,.42);

    opacity: 0;

    pointer-events: none;

    z-index: 70;
}


.backdrop.show {
    opacity: 1;

    pointer-events: auto;
}


/* Mensagem rápida */
.toast {
    position: fixed;

    left: 50%;
    bottom: 24px;

    transform: translate(-50%, 25px);

    background: var(--brown);

    color: #fff;

    padding: 12px 18px;

    border-radius: 14px;

    opacity: 0;

    transition: .25s;

    z-index: 100;
}


.toast.show {
    opacity: 1;

    transform: translate(-50%, 0);
}


/* =========================================================
   13. PAINEL ADMINISTRATIVO
   ========================================================= */

/* Estrutura do painel */
.admin-shell {
    display: grid;

    grid-template-columns: 250px 1fr;

    min-height: 100vh;
}


/* Menu lateral */
.admin-side {
    background: var(--brown);

    color: #fff;

    padding: 22px;
}


/*
   Logo do painel administrativo.

   Também corrigimos a classe que estava como ".admin-".
*/
.admin-side .admin-logo {
    width: 205px;
    max-height: 190px;

    object-fit: contain;

    background: white;

    border-radius: 12px;

    padding: 8px;

    margin-bottom: 20px;
}


/* Links administrativos */
.admin-side a {
    display: block;

    padding: 10px 12px;

    border-radius: 10px;

    color: #f8e9e2;
}


/* Hover */
.admin-side a:hover {
    background: rgba(255,255,255,.1);
}


/* Conteúdo do painel */
.admin-main {
    padding: 28px;

    background: #fffaf6;
}


/* Cabeçalho */
.admin-head {
    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 22px;
}


/* =========================================================
   INDICADORES DO DASHBOARD
   ========================================================= */

.metrics {
    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 14px;
}


.metric {
    background: #fff;

    border: 1px solid var(--line);

    border-radius: 18px;

    padding: 20px;
}


.metric small {
    color: var(--muted);
}


.metric strong {
    font-size: 28px;

    display: block;

    margin-top: 6px;
}


/* =========================================================
   TABELAS ADMINISTRATIVAS
   ========================================================= */

.table-wrap {
    overflow: auto;

    background: #fff;

    border: 1px solid var(--line);

    border-radius: 18px;

    margin-top: 18px;
}


table {
    width: 100%;

    border-collapse: collapse;
}


th,
td {
    padding: 12px 14px;

    border-bottom: 1px solid var(--line);

    text-align: left;

    white-space: nowrap;
}


th {
    font-size: 12px;

    text-transform: uppercase;

    color: var(--muted);
}


/* Formulários em duas colunas */
.grid-2 {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 16px;
}


/* Grupo de botões */
.actions {
    display: flex;

    gap: 8px;

    flex-wrap: wrap;
}


/* Etiquetas de status */
.badge {
    display: inline-block;

    padding: 5px 9px;

    border-radius: 999px;

    background: var(--cream);

    font-size: 12px;

    font-weight: 700;
}


/* =========================================================
   14. RESPONSIVIDADE - TABLET
   ========================================================= */

@media (max-width: 900px) {

    /* Esconde links principais */
    .nav-links {
        display: none;
    }


    /* Hero vira uma coluna */
    .hero-grid,
    .loyalty-grid,
    .grid-2 {
        grid-template-columns: 1fr;
    }


    /* Diminui ilustração */
    .hero-visual {
        min-height: 420px;
    }


    /* Produtos em duas colunas */
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
    }


    /* Dashboard */
    .metrics {
        grid-template-columns: 1fr 1fr;
    }


    /* Admin passa para uma coluna */
    .admin-shell {
        grid-template-columns: 1fr;
    }


    .admin-side {
        position: relative;
    }


    /* Menu administrativo */
    .admin-side nav {
        display: grid;

        grid-template-columns: repeat(2, 1fr);
    }
}


/* =========================================================
   15. RESPONSIVIDADE - CELULAR
   ========================================================= */

@media (max-width: 620px) {

    /* Margem lateral */
    .container {
        width: min(100% - 22px, 1180px);
    }


    /*
       Logo no celular.

       Mantemos menor que no computador para
       não ocupar toda a barra de navegação.
    */
    .brand-logo {
        width: 190px;
        height: 65px;
    }


    /* Menu */
    .nav {
        min-height: 82px;

        gap: 8px;
    }


    /* Esconde botão secundário */
    .nav-actions .ghost {
        display: none;
    }


    /* Título inicial */
    .hero h1 {
        font-size: 43px;
    }


    /* Remove ilustração para ganhar espaço */
    .hero-visual {
        display: none;
    }


    /* Produtos em uma coluna */
    .products-grid {
        grid-template-columns: 1fr;
    }


    /* Botões do hero empilhados */
    .hero-actions {
        flex-direction: column;
    }


    /* Rodapé */
    .footer-grid {
        flex-direction: column;

        align-items: flex-start;
    }


    /* Logo rodapé */
    .footer-logo {
        width: 190px;
        height: auto;
    }


    /* Dashboard */
    .metrics {
        grid-template-columns: 1fr;
    }


    /* Conteúdo admin */
    .admin-main {
        padding: 16px;
    }
}


/* =========================================================
   CORREÇÃO DE ÂNCORAS COM CABEÇALHO FIXO
   Evita que o menu cubra o início das seções
   ========================================================= */

#inicio,
#cardapio,
#nossa-historia,
#fidelidade,
#peca-ja {
    scroll-margin-top: 90px;
}

/* =========================================================
   MENU ADMINISTRATIVO
   ========================================================= */

.admin-nav{
    display:flex;
    flex-direction:column;
    gap:3px;
}


.admin-menu-title{
    display:block;

    margin:
        22px
        12px
        7px;

    font-size:10px;

    font-weight:800;

    letter-spacing:.15em;

    color:
        rgba(255,255,255,.55);
}


.admin-menu-title:first-child{
    margin-top:8px;
}


.admin-side nav a{
    padding:10px 12px;

    border-radius:10px;

    color:#f8e9e2;

    transition:.2s;
}


.admin-side nav a:hover{
    background:
        rgba(255,255,255,.10);

    transform:
        translateX(2px);
}
.product-image > img{width:100%;height:100%;display:block;object-fit:cover;}


/* =========================================================
   AJUSTE FINAL - CARDS DE PRODUTO NO CELULAR
   ========================================================= */
.product-image{
    overflow:hidden;
}

@media (max-width: 620px){
    .product-card{
        border-radius:20px;
    }

    .product-image{
        width:100%;
        height:240px !important;
        min-height:240px;
        max-height:240px;
        aspect-ratio:auto;
    }

    .product-image > img{
        width:100% !important;
        height:100% !important;
        max-height:240px !important;
        object-fit:cover !important;
        object-position:center !important;
    }

    .product-body{
        padding:16px;
    }

    .product-body h3{
        font-size:21px;
        line-height:1.15;
    }

    .product-body p{
        min-height:0;
        font-size:14px;
    }

    .product-bottom{
        gap:12px;
        align-items:center;
    }

    .add-btn{
        white-space:nowrap;
    }
}