/* ═══════════════════════════════════════════════════════════════
   Cardápio Pizzad'Oro — Estilos Frontend
   Fontes: Urbanist (títulos/valores) + Poppins (descrições)
   Fundo: transparente — herda o tema do site
═══════════════════════════════════════════════════════════════ */

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

/* ── Variáveis ─────────────────────────────────────────────── */
:root {
    --pdo-primary:      #110301;
    --pdo-accent:       #c9961a;
    --pdo-accent-light: #e8b832;
    --pdo-accent-dark:  #9a6f10;
    --pdo-card-bg:      #ffffff;
    --pdo-border:       #e8e0d6;
    --pdo-muted:        #6b5e54;
    --pdo-text:         #110301;
    --pdo-radius:       20px;
    --pdo-shadow:       0 4px 20px rgba(17,3,1,.07);
    --pdo-shadow-h:     0 12px 36px rgba(17,3,1,.14);
    --pdo-font-title:   'Urbanist', sans-serif;
    --pdo-font-body:    'Poppins', sans-serif;
    --transition:       .25s cubic-bezier(.4,0,.2,1);
}

/* ── Wrapper — sem fundo próprio, herda o tema ─────────────── */
.pdo-wrap {
    font-family: var(--pdo-font-body);
    color: var(--pdo-text);
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 20px 60px;
    background: transparent;
}

/* ── Navegação de categorias ───────────────────────────────── */
.pdo-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    padding: 32px 0 24px;
    margin-bottom: 8px;
}
.pdo-nav__link {
    font-family: var(--pdo-font-title);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--pdo-muted);
    text-decoration: none;
    padding: 9px 22px;
    border: 1.5px solid var(--pdo-border);
    border-radius: 30px;
    transition: all var(--transition);
    background: transparent;
}
.pdo-nav__link:hover,
.pdo-nav__link--active {
    color: var(--pdo-primary);
    border-color: var(--pdo-accent);
    background: rgba(201,150,26,.07);
}

/* ── Seção / Categoria ─────────────────────────────────────── */
.pdo-section {
    margin-top: 56px;
}
.pdo-section__header {
    margin-bottom: 30px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--pdo-border);
    position: relative;
}
.pdo-section__header::before {
    content: '';
    display: block;
    width: 44px;
    height: 3px;
    background: var(--pdo-accent);
    border-radius: 2px;
    margin-bottom: 14px;
}
.pdo-section__title {
    font-family: var(--pdo-font-title);
    font-size: 32px;
    font-weight: 800;
    color: var(--pdo-primary);
    margin: 0 0 6px;
    letter-spacing: -.01em;
    text-transform: uppercase;
}
.pdo-section__sub {
    font-family: var(--pdo-font-body);
    font-size: 14px;
    font-weight: 400;
    color: var(--pdo-muted);
    margin: 0;
    line-height: 1.7;
}

/* ── Grid ──────────────────────────────────────────────────── */
.pdo-grid {
    display: grid;
    gap: 22px;
}
.pdo-cols-1 { grid-template-columns: 1fr; }
.pdo-cols-2 { grid-template-columns: repeat(2, 1fr); }
.pdo-cols-3 { grid-template-columns: repeat(3, 1fr); }
.pdo-cols-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 600px) {
    .pdo-cols-2,.pdo-cols-3,.pdo-cols-4 { grid-template-columns: 1fr; }
    .pdo-section__title { font-size: 24px; }
}
@media (min-width:601px) and (max-width:900px) {
    .pdo-cols-3,.pdo-cols-4 { grid-template-columns: repeat(2,1fr); }
}
@media (min-width:901px) and (max-width:1100px) {
    .pdo-cols-4 { grid-template-columns: repeat(3,1fr); }
}

/* ── Card ──────────────────────────────────────────────────── */
.pdo-card {
    background: var(--pdo-card-bg);
    border: 1px solid var(--pdo-border);
    border-radius: var(--pdo-radius);
    overflow: hidden;
    box-shadow: var(--pdo-shadow);
    display: flex;
    flex-direction: column;
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.pdo-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--pdo-shadow-h);
    border-color: rgba(201,150,26,.4);
}
.pdo-card--destaque {
    border-color: var(--pdo-accent);
    box-shadow: 0 0 0 1px var(--pdo-accent), var(--pdo-shadow);
}

/* Imagem */
.pdo-card__img-wrap {
    position: relative;
    aspect-ratio: 4/3;
    overflow: hidden;
    background: #f5f0e8;
    border-radius: var(--pdo-radius) var(--pdo-radius) 0 0;
}
.pdo-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .45s ease;
    border-radius: var(--pdo-radius) var(--pdo-radius) 0 0;
}
.pdo-card:hover .pdo-card__img {
    transform: scale(1.05);
}

/* Número */
.pdo-card__num {
    position: absolute;
    bottom: 10px;
    left: 12px;
    font-family: var(--pdo-font-title);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    color: #fff;
    background: var(--pdo-primary);
    padding: 4px 10px;
    border-radius: 20px;
    line-height: 1.4;
}

/* Badge destaque */
.pdo-card__badge {
    position: absolute;
    top: 10px;
    right: 12px;
    font-family: var(--pdo-font-title);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #fff;
    background: var(--pdo-accent);
    padding: 4px 12px;
    border-radius: 20px;
    box-shadow: 0 2px 8px rgba(201,150,26,.35);
}

/* Corpo */
.pdo-card__body {
    padding: 18px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    flex: 1;
}

/* Nome — Urbanist 22px */
.pdo-card__name {
    font-family: var(--pdo-font-title);
    font-size: 22px;
    font-weight: 700;
    color: var(--pdo-primary);
    margin: 0;
    line-height: 1.2;
    letter-spacing: -.01em;
}

/* Descrição — Poppins 16px */
.pdo-card__desc {
    font-family: var(--pdo-font-body);
    font-size: 16px;
    font-weight: 400;
    color: var(--pdo-muted);
    margin: 0;
    line-height: 1.6;
    flex: 1;
}

/* Preços — Urbanist */
.pdo-card__precos {
    display: flex;
    gap: 14px;
    margin-top: 8px;
    flex-wrap: wrap;
    align-items: flex-end;
}
.pdo-preco {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}
.pdo-preco__label {
    font-family: var(--pdo-font-body);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--pdo-muted);
    line-height: 1;
}
.pdo-preco__val {
    font-family: var(--pdo-font-title);
    font-size: 22px;
    font-weight: 800;
    color: var(--pdo-accent);
    line-height: 1;
}
/* Preço único: um pouco maior */
.pdo-card__precos:not(.pdo-card__precos--multi) .pdo-preco__val {
    font-size: 26px;
}

/* Separador sutil entre preços múltiplos */
.pdo-card__precos--multi .pdo-preco + .pdo-preco {
    padding-left: 14px;
    border-left: 1px solid var(--pdo-border);
}

/* ── Vazio ─────────────────────────────────────────────────── */
.pdo-empty {
    text-align: center;
    padding: 80px 0;
    font-family: var(--pdo-font-body);
    color: var(--pdo-muted);
    font-size: 15px;
}