/* ============================================
   LOJA — Ação Restauracionista
   Extensão do blog.css — mesmas variáveis e base
   ============================================ */

/* ── Grid de produtos ────────────────────────────────────────── */
.produto-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

/* ── Card de produto — herda .post-card do blog.css ─────────── */
.produto-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: all .3s cubic-bezier(.4,0,.2,1);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    position: relative;
}
.produto-card:hover {
    border-color: var(--color-accent);
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}
.produto-card:hover .produto-card-title { color: var(--color-accent); }

.badge-prevenda {
    position: absolute; top: 10px; left: 0;
    background: var(--color-accent); color: white;
    font-size: .6rem; font-weight: 700; letter-spacing: 1px;
    text-transform: uppercase; padding: 3px 10px 3px 8px;
    z-index: 2; border-radius: 0 4px 4px 0;
}

.produto-card-img {
    width: 100%; aspect-ratio: 3/4; object-fit: cover;
    background: var(--color-border); display: block;
    transition: transform .4s ease;
}
.produto-card:hover .produto-card-img { transform: scale(1.03); }

.produto-card-img-placeholder {
    width: 100%; aspect-ratio: 3/4;
    background: var(--color-border);
    display: flex; align-items: center; justify-content: center;
    color: var(--color-text-light); font-size: 3rem;
}

.produto-card-body {
    padding: 16px;
    display: flex; flex-direction: column; flex: 1;
}

.produto-card-preco {
    font-size: .62rem; font-weight: 800; letter-spacing: 1px;
    text-transform: uppercase; color: var(--color-gold); margin-bottom: 7px;
}

.produto-card-title {
    font-family: var(--font-serif); font-size: 1.05rem; font-weight: 700;
    line-height: 1.4; color: var(--color-text); margin-bottom: 8px; flex: 1;
    transition: color .2s;
}

.produto-card-desc {
    font-size: .82rem; color: var(--color-text-light);
    line-height: 1.5; margin-bottom: 12px;
    display: -webkit-box; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden;
}

.produto-card-meta {
    display: flex; justify-content: space-between;
    align-items: center; margin-top: auto;
}
.produto-card-arrow { font-size: .75rem; color: var(--color-accent); font-weight: 600; }

/* ── Detalhe do produto ──────────────────────────────────────── */
.produto-detalhe {
    max-width: 960px; margin: 0 auto;
    padding: 40px var(--spacing) 60px;
    display: grid; grid-template-columns: 320px 1fr;
    gap: 48px; align-items: start;
}

.produto-detalhe-img-col { position: sticky; top: 80px; }

.produto-detalhe-img-wrap {
    border-radius: var(--radius); overflow: hidden;
    border: 1px solid var(--color-border); box-shadow: var(--shadow-md);
    background: var(--color-border);
}
.produto-detalhe-img-wrap img { width: 100%; display: block; object-fit: cover; }
.produto-detalhe-img-placeholder {
    aspect-ratio: 3/4; display: flex; align-items: center;
    justify-content: center; font-size: 5rem; color: var(--color-text-light);
}

.produto-detalhe-info { display: flex; flex-direction: column; gap: 20px; }

.produto-detalhe-label {
    font-size: .65rem; font-weight: 800; letter-spacing: 2px;
    text-transform: uppercase; color: var(--color-accent);
}

.produto-detalhe-title {
    font-family: var(--font-serif); font-size: clamp(1.6rem, 3.5vw, 2.2rem);
    font-weight: 700; line-height: 1.25; color: var(--color-text);
}

.produto-detalhe-preco {
    font-size: 1.6rem; font-weight: 800;
    color: var(--color-gold); font-family: var(--font-sans);
}

.produto-detalhe-divider { border: none; border-top: 1px solid var(--color-border); }

.produto-detalhe-content {
    font-family: var(--font-serif); font-size: 1.15rem;
    line-height: 1.8; color: var(--color-text-light);
}
.produto-detalhe-content p { margin-bottom: 1em; }
.produto-detalhe-content p:last-child { margin-bottom: 0; }
.produto-detalhe-content strong { color: var(--color-text); }
.produto-detalhe-content a { color: var(--color-accent); text-decoration: underline; }

.btn-comprar {
    display: inline-block; background: var(--color-accent); color: white;
    font-size: .88rem; font-weight: 700; padding: 14px 32px;
    border-radius: 8px; border: none; cursor: pointer;
    transition: opacity .2s; font-family: var(--font-sans);
}
.btn-comprar:hover { opacity: .88; color: white; }

.btn-apostolado {
    font-size: .78rem; color: var(--color-text-light);
    display: flex; align-items: center; gap: 6px;
}

.btn-voltar {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--color-text-light); font-size: .82rem;
    background: none; border: none; cursor: pointer;
    padding: 0; font-family: var(--font-sans); transition: color .2s;
}
.btn-voltar:hover { color: var(--color-accent); }

/* ── Modal de compra ─────────────────────────────────────────── */
.modal-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,.7); z-index: 200;
    align-items: center; justify-content: center; padding: 1rem;
}
.modal-overlay.open { display: flex; }

.modal-box {
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius); max-width: 480px; width: 100%;
    box-shadow: 0 24px 64px rgba(0,0,0,.5);
}

.modal-box-header {
    padding: 16px 20px; border-bottom: 1px solid var(--color-border);
    display: flex; justify-content: space-between; align-items: center;
}
.modal-box-title {
    font-size: .65rem; font-weight: 800; letter-spacing: 2px;
    text-transform: uppercase; color: var(--color-gold); margin: 0;
}
.modal-box-close {
    background: none; border: none; color: var(--color-text-light);
    font-size: 1.1rem; cursor: pointer; line-height: 1;
    padding: 4px; transition: color .2s; border-radius: 4px;
}
.modal-box-close:hover { color: var(--color-text); }

.modal-box-body { padding: 20px; display: flex; flex-direction: column; gap: 14px; }

.form-field { display: flex; flex-direction: column; gap: 5px; }
.form-field label {
    font-size: .68rem; font-weight: 700; letter-spacing: 1px;
    text-transform: uppercase; color: var(--color-text-light);
}
.form-field input {
    background: var(--color-bg); border: 1px solid var(--color-border);
    color: var(--color-text); font-family: var(--font-sans);
    font-size: .9rem; padding: 9px 12px; border-radius: 8px;
    outline: none; transition: border-color .2s;
}
.form-field input:focus { border-color: var(--color-accent); }
.form-field input::placeholder { color: var(--color-text-light); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.modal-box-footer {
    padding: 14px 20px 20px;
    display: flex; gap: 10px; align-items: center;
}
.btn-modal-submit {
    background: var(--color-accent); color: white; border: none;
    font-family: var(--font-sans); font-size: .85rem; font-weight: 700;
    padding: 10px 24px; border-radius: 8px;
    cursor: pointer; transition: opacity .2s;
}
.btn-modal-submit:hover { opacity: .88; }
.btn-modal-cancel {
    background: none; border: none; color: var(--color-text-light);
    font-size: .82rem; cursor: pointer;
    font-family: var(--font-sans); transition: color .2s;
}
.btn-modal-cancel:hover { color: var(--color-text); }

/* ── Responsivo ──────────────────────────────────────────────── */
@media (max-width: 900px) {
    .produto-detalhe { grid-template-columns: 1fr; gap: 28px; }
    .produto-detalhe-img-col { position: static; max-width: 300px; }
}

@media (max-width: 640px) {
    .produto-grid { grid-template-columns: 1fr; }
    .produto-detalhe { padding: 24px 16px 48px; }
    .form-row { grid-template-columns: 1fr; }
}