@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;700&display=swap');

:root {
    --primary: #990000;
    --primary-dark: #680000;
    --primary-light: #c62828;
    --background: #f5f6f8;
    --surface: #fff;
    --text: #181818;
    --muted: #687078;
    --border: rgba(0,0,0,.07);
    --shadow: 0 10px 30px rgba(0,0,0,.07);
    --green: #4caf50;
    --green-light: #e8f5e9;
}

*{box-sizing:border-box}
html{background:var(--background);scroll-behavior:smooth}
body{margin:0;min-height:100vh;background:radial-gradient(circle at 50% -10%,rgba(153,0,0,.1),transparent 34%),var(--background);color:var(--text);font-family:"Poppins",sans-serif;font-weight:500;-webkit-font-smoothing:antialiased}

header {
    width:min(100% - 28px,760px);
    margin:14px auto 18px;
    padding:24px 18px 20px;
    background:#fff;
    border:1px solid var(--border);
    border-radius:24px;
    box-shadow:var(--shadow);text-align:
}

.barra{position:relative;width:100%;text-align:center}
.title{margin-bottom:18px}.title h1{margin:0;color:var(--text);font-size:28px;line-height:1.1;font-weight:700;letter-spacing:-.6px}.title div{margin-top:3px;color:var(--muted);font-size:14px}.title b{color:var(--primary);font-weight:700}

#search-bar{width:min(100%,560px);height:48px;display:block;margin:0 auto 13px;padding:0 17px 0 45px;border:1px solid #e1e3e6;border-radius:14px;outline:0;background:#f8f9fa;color:var(--text);font:500 13px "Poppins",sans-serif;transition:.2s}
#search-bar::placeholder{color:#92989e}#search-bar:focus{border-color:rgba(153,0,0,.45);background:#fff;box-shadow:0 0 0 4px rgba(153,0,0,.08)}

.bts{width:min(100%,560px);display:grid;grid-template-columns:52px 1fr;gap:9px;margin:0 auto}
.btMenu,.btCategory{min-height:45px;border:0;border-radius:13px;cursor:pointer;font:700 13px "Poppins",sans-serif;transition:.18s}
.btMenu{display:flex;align-items:center;justify-content:center;background:#f0f1f3;color:#242424}
.btCategory{display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 15px;background:linear-gradient(135deg,var(--primary),var(--primary-light));color:#fff;box-shadow:0 7px 16px rgba(153,0,0,.2)}
.btMenu:hover,.btCategory:hover{filter:brightness(1.04);transform:translateY(-1px)}

.options-menu {
                display: none;
                position: fixed;
                top: 70px;
                right: max(16px, calc((100vw - 760px) / 2 + 14px));
                width: min(250px, calc(100vw - 32px));
                padding: 8px;
                background: rgba(255,255,255,.98);
                border: 1px solid var(--border);
                border-radius: 16px;
                box-shadow: 0 18px 45px rgba(0,0,0,.16);
                z-index: 2000;
                text-align: left;
                animation: menuIn .18s ease;
            }

            @keyframes menuIn {
                from { opacity: 0; transform: translateY(-6px) scale(.98); }
                to { opacity: 1; transform: translateY(0) scale(1); }
            }

            .options-menu a {
                display: flex;
                align-items: center;
                gap: 12px;
                padding: 12px 13px;
                text-decoration: none;
                color: #252525;
                font-size: 14px;
                border-radius: 11px;
                transition: background .2s ease;
            }

            .options-menu a:hover {
                background: #f5f5f6;
            }

            .options-menu a i {
                width: 22px;
                text-align: center;
                color: var(--primary);
            }
            
main{width:min(100% - 28px,760px);margin:0 auto;padding:0 0 28px}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.card{position:relative;display:flex;flex-direction:column;min-width:0;padding:15px;background:#fff;border:1px solid var(--border);border-radius:19px;box-shadow:var(--shadow);text-align:center;cursor:pointer;overflow:hidden;transition:.2s}
.card::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,var(--primary-dark),var(--primary-light))}
.card:hover{transform:translateY(-3px);box-shadow:0 15px 35px rgba(0,0,0,.1)}
.card img{width:100%;height:175px;object-fit:contain;margin:3px auto 11px;border-radius:13px;background:#fafafa}
.card h2{margin:0;color:var(--text);font:700 14px/1.35 "Poppins",sans-serif;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.card h2.preco{margin-top:9px;color:var(--primary);font-size:16px;line-height:1.25}
.card .desconto{align-self:center;display:inline-flex;align-items:center;justify-content:center;min-height:23px;margin-top:8px;padding:3px 9px;border-radius:7px;background:var(--green-light);color:var(--green);font:700 10px "Poppins",sans-serif}
.textError{grid-column:1/-1;margin:30px 0;padding:25px 18px;background:#fff;border:1px solid var(--border);border-radius:17px;color:var(--muted);text-align:center;font-size:14px}

#buttonShopee{margin:18px 0 0}#buttonShopee button{width:100%;min-height:48px;display:flex;align-items:center;justify-content:center;gap:8px;padding:11px 18px;border:0;border-radius:14px;background:linear-gradient(135deg,var(--primary),var(--primary-light));color:#fff;font:700 14px "Poppins",sans-serif;cursor:pointer;box-shadow:0 7px 16px rgba(153,0,0,.2);transition:.18s}
#buttonShopee button:hover{filter:brightness(1.05);transform:translateY(-1px)}#buttonShopee button i{margin:0}

.modal{display:none;position:fixed;inset:0;z-index:3000;padding:18px;background:rgba(15,15,15,.55);backdrop-filter:blur(4px);overflow-y:auto}
.modal-content{position:relative;width:min(100%,590px);margin:7vh auto 30px;padding:24px 18px 20px;background:#fff;border:1px solid var(--border);border-radius:22px;box-shadow:0 22px 60px rgba(0,0,0,.2)}
.modal-content h2{margin:0 45px 18px 4px;color:var(--text);font:700 20px "Poppins",sans-serif}
.close{position:absolute;top:13px;right:15px;width:40px;height:40px;display:grid;place-items:center;border:0;border-radius:50%;background:#f0f1f3;color:#333;font:400 27px Arial;cursor:pointer}.close:hover{background:#e4e5e7}
#listaCategorias{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.categoria-card{min-height:76px;display:flex;align-items:center;gap:11px;padding:12px;background:#f7f8f9;border:1px solid #eceef0;border-radius:14px;color:#282828;cursor:pointer;font:700 12px "Poppins",sans-serif;transition:.18s}
.categoria-card:hover{background:#fff5f5;border-color:rgba(153,0,0,.2);transform:translateY(-1px)}
.categoria-card .icon{width:40px;height:40px;flex:0 0 40px;display:grid;place-items:center;border-radius:12px;background:#fff;color:var(--primary);box-shadow:0 4px 12px rgba(0,0,0,.06);font-size:17px}

.overlayMenuOpcoes{display:none;position:fixed;inset:0;z-index:3998;background:rgba(0,0,0,.48);backdrop-filter:blur(3px)}
.card-menu{display:none;position:fixed;z-index:3999;width:min(90%,390px);top:50%;left:50%;transform:translate(-50%,-50%);padding:9px;background:rgba(255,255,255,.98);border:1px solid var(--border);border-radius:20px;box-shadow:0 22px 60px rgba(0,0,0,.22);overflow:hidden}
.card-menu h2{
    margin:8px 10px 12px;
    padding:5px 2px 9px;
    color:var(--text);
    border-bottom:1px solid #eee;
    font:700 17px/1.35 "Poppins",sans-serif;
}
.card-menu a{display:flex;align-items:center;gap:11px;min-height:45px;padding:10px 12px;color:#292929;text-decoration:none;border-radius:12px;font:500 13px "Poppins",sans-serif}.card-menu a:hover{background:#f6f7f8}.card-menu a i{width:23px;text-align:center;color:var(--primary);font-size:16px}

#toast{visibility:hidden;position:fixed;z-index:5000;top:22px;left:50%;transform:translate(-50%,-10px);width:min(calc(100% - 28px),360px);padding:12px 16px;background:#222;color:#fff;border-radius:13px;text-align:center;font:500 12px "Poppins",sans-serif;opacity:0;box-shadow:0 12px 30px rgba(0,0,0,.22);transition:.25s}
#toast.show{visibility:visible;opacity:1;transform:translate(-50%,0)}

footer{width:min(100% - 28px,760px);margin:0 auto 20px;padding:28px 16px 14px;background:#fff;border:1px solid var(--border);border-radius:24px;box-shadow:var(--shadow);text-align:center}
.footer-div>center>a{display:inline-flex;padding:7px;border-radius:50%;background:#f4f4f5}.footer-div>center>a img{display:block;border-radius:50%}
.footer-div>center>b{display:block;margin:8px 0 17px;color:var(--text);font:700 17px "Poppins",sans-serif}
.divs-footer{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:min(100%,520px);margin:0 auto}
.buttonFooter{display:block;padding:10px;background:#f6f6f7;border-radius:12px;color:inherit;text-decoration:none;transition:.18s}.buttonFooter:hover{background:#ededee;transform:translateY(-1px)}
.button-content-footer{display:flex;align-items:center;justify-content:center;gap:8px}.button-image-footer{width:22px;height:22px;object-fit:contain}.button-title-footer{margin:0;color:#222;font:700 12px "Poppins",sans-serif}.text-footer{margin:21px 0 0;color:#9aa0a6;font:500 11px "Poppins",sans-serif}

@media(min-width:650px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}.card img{height:165px}}
@media(max-width:480px){header,main,footer{width:min(100% - 20px,760px)}header{margin-top:10px;padding:22px 13px 17px;border-radius:20px}.title h1{font-size:25px}.grid{gap:10px}.card{padding:12px;border-radius:17px}.card img{height:145px}.card h2{font-size:12px}.card h2.preco{font-size:14px}#listaCategorias{grid-template-columns:1fr}.modal{padding:12px}.modal-content{margin-top:4vh;border-radius:19px}}
@media(max-width:350px){.grid{grid-template-columns:1fr}.card img{height:190px}.bts{grid-template-columns:45px 1fr}.btCategory{font-size:11px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}