:root {
    --gold: #c4a35a;
    --gold-soft: #e8d5a3;
    --ink: #080705;
    --panel: #12100c;
}

html {
    scroll-behavior: smooth;
}

body {
    background: var(--ink);
    color: #f3eee4;
    overflow-x: hidden;
}

::selection {
    background: rgba(196, 163, 90, 0.35);
    color: #fff8ea;
}

.hero-photo {
    background-image:
        linear-gradient(90deg, rgba(8, 7, 5, 0.96) 0%, rgba(8, 7, 5, 0.78) 42%, rgba(8, 7, 5, 0.18) 100%),
        url("https://images.unsplash.com/photo-1558030006-450675393462?auto=format&fit=crop&w=1800&q=80");
    background-position: center right;
    background-size: cover;
}

.gold-border {
    border: 1px solid rgba(196, 163, 90, 0.38);
}

.gold-ring {
    box-shadow: inset 0 0 0 1px rgba(196, 163, 90, 0.28);
}

.category-btn[aria-pressed="true"] {
    background: #16130e;
    border-color: var(--gold);
    color: var(--gold-soft);
}

.category-btn[aria-pressed="true"] svg {
    color: var(--gold);
}

/* Gaveta do Carrinho (Mobile) */
.cart-drawer {
    transform: translateX(100%);
    transition: transform 0.28s ease;
}

.cart-drawer.is-open {
    transform: translateX(0);
}

/* Fundo/Overlay dos Modais (Escondido por padrão) */
.modal-overlay {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.28s ease, visibility 0.28s ease;
}

.modal-overlay.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Modal de Detalhes do Produto - Centralizado (Mobile + Desktop) */
.product-modal {
    transform: translate(-50%, -50%) scale(0.92);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease, visibility 0.3s ease;
}

.product-modal.is-open {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    visibility: visible;
}

/* Modal de Detalhes do Produto - Desktop (Centralizado + 2 Colunas) */
@media (min-width: 768px) {
    .product-modal {
        transform: translate(-50%, -50%) scale(0.95);
        opacity: 0;
        visibility: hidden;
        transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
    }

    .product-modal.is-open {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
        visibility: visible;
    }
}

.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

textarea:focus,
button:focus-visible,
a:focus-visible,
input:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

@media (max-width: 767px) {
    .hero-photo {
        background-image:
            linear-gradient(180deg, rgba(8, 7, 5, 0.88) 8%, rgba(8, 7, 5, 0.55) 46%, rgba(8, 7, 5, 0.94) 100%),
            url("https://images.unsplash.com/photo-1558030006-450675393462?auto=format&fit=crop&w=1200&q=80");
        background-position: center 30%;
    }
}

/* Customização da Barra de Rolagem */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(196, 163, 90, 0.5) var(--ink);
}

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: var(--ink);
}

::-webkit-scrollbar-thumb {
    background: rgba(196, 163, 90, 0.5);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(196, 163, 90, 0.8);
}