@import url('https://fonts.googleapis.com/css2?family=Farsan&family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.hamburger {
    display: none;
}

#carrinho {
    display: none;
}
body{
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: #eac578;
}
header {
    background-color: #451e10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    text-align: center;
}
.header-placeholder {
    flex: 1;
}
main {
    flex: 1;
    padding: 0rem;
}
footer {
    background-color: #48250b;
    padding: 20px;
    text-align: center;
    color: #fff;
}
fieldset {
    border: 0.2rem solid #48250b;
    border-radius: 1rem;
    padding: 2.5rem;
    margin-bottom: 10rem;
    background-color: #fff;
}
legend {
    font-weight: bold;
    padding: 0 10px;
}
h1 {
    flex: 1;
    text-align: center;
    font-size: 5rem;
    font-family: 'Farsan', cursive;
    color: #ffffff;
}
h2 {
    text-align: center;
    font-size: 2rem;
    font-family: 'Mulish', sans-serif;
    color: #ffffff;
    margin-bottom: 10px;
}
p, h3, h4 {
    margin-bottom: 10px;
    font-family: 'Mulish', sans-serif;
}
h5 {
    font-size: 1.5rem;
    text-align: center;
    font-family: 'Mulish', sans-serif;
    color: #48250b;
    margin-bottom: 2rem;
}
#product-list {
    display: flex;
    flex-wrap: wrap;
    gap: 3rem;
    justify-content: center;
    font-family: 'Mulish', sans-serif;
    font-size: 1.25rem;
}
#listras {
    background-image: linear-gradient(rgba(34, 16, 25, 0.697), rgba(34, 16, 25, 0.697)), url('/assets/xadrez.avif');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    padding: 7rem;
}
#search-div {
    padding-top: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 2rem;
    margin-bottom: 4rem;
    position: relative;
    width: 50%;
    margin-left: auto;
    margin-right: auto;
}

input[type="text"] {
    padding: 0.5rem 5rem 0.5rem 2.5rem; 
    font-size: 1rem;
    border: 0.2rem solid #48250b;
    border-radius: 0.5rem;
    width: 87%;
}

#lupa {
    width: 2rem;
    height: 2rem;
    position: absolute;
    left: 1rem; 
    color: #ccc;
}
button, .btn {
    display: block;
    margin: 0 auto;
    margin-top: 2rem;
    padding: 0.5rem 1rem;
    font-size: 1rem;
    border: none;
    border-radius: 0.5rem;
    background-color: #48250b;
    color: #fff;
    cursor: pointer;
    text-decoration: none;
}
.btn {
    display: inline-block;
    font-family: 'Mulish', sans-serif;
}
#carrinho {
    width: 2rem;
    height: 2rem;
    vertical-align: middle;
}
.header-placeholder {
    width: 2.5rem; 
    height: 2.5rem;
}
#nav-menu {
    position: fixed;
    top: 0;
    right: -250px; 
    width: 250px;
    height: 100%;
    background-color: #311704;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem; 
    transition: right 0.3s ease; 
    z-index: 999;
    display: none; 
}
.hamburger {
    display: none; 
}

.nav-desktop {
    flex: 1;
    display: flex;
    justify-content: center;
    gap: 2rem;
}

.nav-desktop a {
    color: #fff;
    font-size: 1.2rem;
    font-family: 'Mulish', sans-serif;
    text-decoration: none;
    border-radius: 0.4rem;
    transition: background 0.2s;
    border: solid 0.2rem #6d350e43;
    padding: 0.5rem 1rem;
    background-color: #793f1543;
}
#nav-menu a {
    color: #fff;
    font-size: 1.5rem;
    font-family: 'Mulish', sans-serif;
    padding: 0.5rem 1.5rem;
    width: 100%;
    text-align: center;
    border-radius: 0.4rem;
    transition: background 0.2s;
}

#nav-menu.open {
    right: 0;
    display: flex; /* mostra quando aberto */
}
#nav-menu a:hover {
    background: rgba(255, 255, 255, 0.2);
}
.header-right {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: auto; 
}

.header-placeholder {
    width: auto; 
}
.hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    margin: 0;
}

.hamburger span {
    display: block;
    width: 25px;
    height: 3px;
    background-color: #bbb9b2;
    border-radius: 3px;
}
#sobre, #contato, #compra {
    background-color: #703a24;
    width: 100%;
    padding: 4rem 2rem;
    box-shadow: inset 0 0 2rem rgba(40, 16, 16, 0.681);
}
#compra {
    min-height: 100vh;
}
#ocarrinho{
    width: 100%;
    text-align: center;
    min-height: 100vh;
    padding: 4rem 2rem;
    background-image: linear-gradient(rgba(34, 16, 25, 0.697), rgba(34, 16, 25, 0.697)), url('/assets/xadrez.avif');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

#compra-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 400px;
    margin: 0 auto;
    padding: 2rem;
    background-color: rgba(255, 255, 255, 0.95);
    border-radius: 1rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    margin-top: 4rem;
    margin-bottom: 4rem;
}

#compra-form label {
    font-family: 'Mulish', sans-serif;
    font-weight: 600;
    color: #48250b;
    margin-bottom: 0.5rem;
    display: block;
}
#compra-form input,
#compra-form select {
    padding: 0.5rem;
    border: 2px solid #d4a574;
    border-radius: 0.6rem;
    font-family: 'Mulish', sans-serif;
    font-size: 0.95rem;
    background-color: #fff;
    transition: border-color 0.3s ease;
}
#contato {
    background-color: #eac578;
}
.con {
    color: #5f0b0b;
    font-size: 1.5rem;
    font-family: 'Mulish', sans-serif;
    text-align: center;
    margin-top: 2rem;
}
#imga, #imgb {
    width: 25%;
    min-width: 25%;
    height: auto;
    border-radius: 0.5rem;
    margin: 2rem;
    margin-top: 2rem;
}
#sobre-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    padding: 4rem;
    color: #fff;
    font-size: 1.6rem;
}
#h2carrinho {
    text-align: center;
    font-size: 2rem;
    font-family: 'Mulish', sans-serif;
    color: #e8e8e8;
    margin-bottom: 2rem;
}
#carrinho-lista {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    font-family: 'Mulish', sans-serif;
    font-size: 1.5rem;
    padding: 2rem;
}
#carrinho-total {
    text-align: center;
    font-size: 1.5rem;
    font-family: 'Mulish', sans-serif;
    color: #e8e8e8;
    margin-top: 2rem;
}
#carrinho-msg {
    text-align: center;
    font-size: 1.5rem;
    font-family: 'Mulish', sans-serif;
    color: #e8e8e8;
    margin-top: 2rem;
}
#carrito {
    margin: 7rem;
}

@media (min-width: 1024px) {
    #logocake {
        width: 5rem;
        height: auto;
        margin-bottom: 1rem;
        margin-right: 0.8rem;
        margin-left: 6rem;
    }
}

@media (max-width: 1024px) {
    #logocake {
        width: 5rem;
        height: auto;
    }
    h1 {
        font-size: 3rem;
    }

    h2 {
        font-size: 1.6rem;
    }

    #search-div {
        width: 70%;
    }

    #sobre-content {
        padding: 2rem;
        font-size: 1.3rem;
        gap: 1.5rem;
    }

    #imga, #imgb {
        width: 60%;
        min-width: 55%;
    }

    #listras {
        padding: 5rem 3rem;
    }

    fieldset {
        margin-bottom: 6rem;
        padding: 2rem;
    }
    .hamburguer {
        display: none; /* aparece no mobile */
    }
}

@media (max-width: 768px) {

.hamburger {
    display: flex; /* aparece no mobile */
}

.nav-desktop {
    display: none; /* some no mobile */
}

    #logocake {
        width: 2rem;
        height: auto;
    }
    #carrinho {
        display: block;
    }
    h1 {
        font-size: 2.2rem;
    }

    h2 {
        font-size: 1.3rem;
    }

    h5 {
        font-size: 1.1rem;
    }

    header {
        padding: 14px 16px;
        justify-content: space-between;
    }

    .header-placeholder {
        display: none;
    }

    #listras {
        background-attachment: scroll;
        padding: 3rem 1.5rem;
    }

    #search-div {
        width: 90%;
        padding-top: 1rem;
        margin-bottom: 2.5rem;
    }

    input[type="text"] {
        width: 100%;
        padding: 0.5rem 1rem 0.5rem 3rem; 
        font-size: 1rem;
        border: 0.2rem solid #5f0b0b;
        border-radius: 0.5rem;
    }

    #product-list {
        gap: 1.5rem;
        padding: 0 1rem;
        font-size: 1rem;
    }

    #sobre-content {
        flex-direction: column;
        padding: 1.5rem 1rem;
        font-size: 1rem;
        gap: 1rem;
        text-align: center;
    }

    #imga, #imgb {
        width: 60%;
        min-width: 60%;
        margin: 0.5rem auto;
    }

    #sobre, #ocarrinho {
        padding: 2.5rem 1rem;
    }

    #h2carrinho {
        font-size: 1.5rem;
    }

    fieldset {
        padding: 1.5rem;
        margin-bottom: 3rem;
    }

    button {
        width: 100%;
        max-width: 300px;
    }
}

@media (max-width: 480px) {

    #logocake {
        width: 2.2rem;
        height: auto;
        margin-bottom: 5px;
    }
    h1 {
        font-size: 2rem;
    }

    h2 {
        font-size: 1.1rem;
    }
    header {
        padding: 1.3rem 1.2rem;
    }
    #imga, #imgb {
        width: 70%;
    }

    #listras {
        padding: 3rem 1rem;
    }

    #sobre-content {
        font-size: 0.95rem;
        flex-wrap: wrap;
        flex-direction: row;
    }
        #carrito {
        margin: 1rem; /* ← era 7rem, muito grande */
    }

    #carrinho-lista {
        font-size: 1rem; /* ← reduz fonte */
        padding: 0.5rem;
    }

    #carrinho-lista > div {
        flex-wrap: wrap; /* ← permite quebrar linha */
        gap: 6px;
    }

    #carrinho-lista > div > div:first-of-type {
        min-width: 0; /* ← evita o texto transbordar */
        word-break: break-word;
    }

    #carrinho-lista > div > div:last-of-type {
        width: 100%; /* ← botões −/+ ficam na linha de baixo */
        justify-content: flex-end;
    }
}