/*
Theme Name: O Uirapuru Temperos
Description: Tema personalizado para O Uirapuru Temperos
Author: Você
Version: 1.0
*/

/* =====================================
   VARIÁVEIS
   ===================================== */
:root {
    --ui-red:    #ED3237;
    --ui-yellow: #FADD7B;
    --ui-bg:     #FFF9F0;
    --ui-text:   #2b1b12;
    --ui-text-soft: #5c4a3a;
}

/* =====================================
   BASE
   ===================================== */

* {
    box-sizing: border-box;
}

body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: var(--ui-bg);
    color: var(--ui-text);
    margin: 0;
    padding: 0;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

iframe {
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

body.nav-open {
    overflow: hidden;
}

.site-main {
    min-height: 60vh;
}

/* Container padrão */
.ui-container {
    width: 100%;
    max-width: 1160px;
    margin: 0 auto;
    padding-inline: 16px;
}

/* Títulos e textos */
h1 {
    font-size: clamp(1.8rem, 2.6vw, 2.4rem);
    margin: 0 0 10px;
}

h2 {
    font-size: clamp(1.5rem, 2.1vw, 2rem);
    margin: 0 0 8px;
}

h3 {
    font-size: clamp(1.1rem, 1.6vw, 1.4rem);
    margin: 0 0 6px;
}

p {
    margin: 0 0 10px;
    font-size: clamp(0.9rem, 1vw, 1rem);
}

/* =====================================
   HEADER + MENU
   ===================================== */

.site-header {
    background: var(--ui-red);
    color: #fff;
}

.ui-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-block: 10px;
}

.ui-logo-img {
    height: 72px; /* maior para desktop */
    width: auto;
}

/* Nav desktop */
.ui-nav {
    display: flex;
    align-items: center;
}

.ui-menu {
    list-style: none;
    display: flex;
    gap: 18px;
    margin: 0;
    padding: 0;
}

.ui-menu li {
    margin: 0;
}

.ui-menu a {
    font-size: 0.9rem;
    color: #fff;
    font-weight: 500;
}

.ui-menu a:hover {
    text-decoration: underline;
}

/* Botão hambúrguer (mobile) */
.ui-menu-toggle {
    display: none;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
}

.ui-menu-toggle-bar {
    display: block;
    width: 22px;
    height: 2px;
    background: #fff;
    margin: 4px 0;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Overlay do menu mobile */
.ui-menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
    z-index: 40;
}

body.nav-open .ui-menu-overlay {
    opacity: 1;
    pointer-events: auto;
}

.ui-nav {
    z-index: 50;
}

/* =====================================
   FOOTER
   ===================================== */

.site-footer {
    background: #Ed3237;
    color: #f4e0b4;
    padding-block: 16px;
    margin-top: 24px;
}

.site-footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 0.85rem;
}

/* =====================================
   SEÇÕES GERAIS
   ===================================== */

.ui-section {
    padding-block: 32px;
}

.ui-section--light {
    background: #FFF9F0;
}

.ui-section--yellow {
    background: #FADD7B22;
}

.ui-section--dark {
    background: #2b1b12;
    color: #fff;
}

.ui-section-header {
    margin-bottom: 18px;
}

.ui-section-header p {
    color: var(--ui-text-soft);
}

/* =====================================
   BOTÕES
   ===================================== */

.ui-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: none;
    cursor: pointer;
    padding: 9px 18px;
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.ui-btn--light {
    background: var(--ui-yellow);
    color: #2b1b12;
}

.ui-btn--outline {
    background: transparent;
    border: 2px solid #fff;
    color: #fff;
}

.ui-btn--ghost {
    background: transparent;
    border: 1px solid var(--ui-red);
    color: var(--ui-red);
}

.ui-btn--full {
    width: 100%;
}

/* =====================================
   HERO SLIDER (HOME)
   ===================================== */

.ui-hero {
    background: #ED3237; /* cor principal atrás do slider */
    padding: 0;
}

/* container do slider ocupando a largura inteira */
.ui-hero-slider {
    position: relative;
    width: 100%;
    max-height: 520px;
    overflow: hidden;
}

/* cada slide */
.ui-hero-slide {
    display: none;
}

.ui-hero-slide--active {
    display: block;
}

/* imagem do slide */
.ui-hero-slide img {
    width: 100%;
    height: 100%;
    max-height: 520px;
    object-fit: cover; /* corta para ficar sempre cheio */
    display: block;
}

/* setas de navegação */
.ui-hero-slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.35);
    border: none;
    color: #fff;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
}

.ui-hero-slider-arrow--prev {
    left: 12px;
}

.ui-hero-slider-arrow--next {
    right: 12px;
}

/* bolinhas (dots) */
.ui-hero-slider-dots {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    z-index: 3;
}

.ui-hero-slider-dots button {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 1px solid #fff;
    background: transparent;
    cursor: pointer;
    padding: 0;
}

.ui-hero-slider-dots button.ui-hero-slider-dot--active {
    background: #fff;
}

/* =====================================
   GRIDS / CARDS
   ===================================== */

.ui-grid {
    display: grid;
    gap: 18px;
}

.ui-grid--products,
.ui-grid--recipes {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.ui-card {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 10px 24px rgba(0,0,0,0.07);
    border: 1px solid rgba(0,0,0,0.04);
    overflow: hidden;
}

.ui-card a {
    display: block;
    color: inherit;
    height: 100%;
}

.ui-card-thumb img {
    width: 100%;
    height: auto;
}

.ui-card-body {
    padding: 12px 14px 14px;
}

.ui-card-body h3 {
    margin: 0 0 6px;
    font-size: 1rem;
}

.ui-card-body p {
    margin: 0 0 8px;
    font-size: 0.88rem;
    color: var(--ui-text-soft);
}

.ui-card-link {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    color: var(--ui-red);
}

.ui-section-actions {
    margin-top: 16px;
}

/* =====================================
   ONDE ENCONTRAR (HOME)
   ===================================== */

.ui-where-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    margin-bottom: 18px;
}

.ui-where-header p {
    color: var(--ui-text-soft);
    max-width: 520px;
}

.ui-where-header-actions {
    flex-shrink: 0;
}

/* Card grande com o mapa */
.ui-where-card {
    background: #fff;
    border-radius: 22px;
    box-shadow: 0 10px 26px rgba(0,0,0,0.08);
    border: 1px solid rgba(0,0,0,0.04);
    padding: 14px 14px 16px;
}

.ui-where-card-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 10px;
}

.ui-where-label {
    display: inline-block;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--ui-text-soft);
    font-weight: 700;
}

.ui-where-sub {
    font-size: 0.8rem;
    color: var(--ui-text-soft);
    opacity: 0.9;
}

/* Moldura geral do mapa */
.ui-where-map-frame {
    border-radius: 18px;
    overflow: hidden;
}

/* ---- TRUQUE: usar o shortcode completo, mas mostrar só o último bloco (mapa) ---- */

/* ---- TRUQUE: usar o shortcode completo, mas mostrar só o mapa ---- */

/* Dentro do wrapper que o shortcode cria, esconde todos os irmãos menos o último */
.ui-where-map-only > div > *:not(:last-child) {
    display: none !important;
}

/* Garante que o último filho (onde fica o mapa) fica visível */
.ui-where-map-only > div > *:last-child {
    display: block;
}

/* Ajuste do próprio mapa (iframe ou Leaflet) */
.ui-where-map-only iframe,
.ui-where-map-only .leaflet-container {
    width: 100% !important;
    height: 320px !important;
    border: 0;
}

/* Mobile: mapa um pouco mais baixo */
@media (max-width: 768px) {
    .ui-where-map-only iframe,
    .ui-where-map-only .leaflet-container {
        height: 260px !important;
    }
}


/* Ajuste de tamanho do mapa (independe se é iframe ou div .leaflet-container) */
.ui-where-map-only iframe,
.ui-where-map-only .leaflet-container {
    width: 100% !important;
    height: 320px !important;
}

/* Responsivo */
@media (max-width: 768px) {

    .ui-where-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .ui-where-header-actions {
        width: 100%;
    }

    .ui-where-header-actions .ui-btn {
        width: 100%;
        justify-content: center;
    }

    .ui-where-map-only iframe,
    .ui-where-map-only .leaflet-container {
        height: 260px !important;
    }
}
/* Remove qualquer textinho solto (como o "<" antes do mapa) */
.ui-where-map-only > div {
    font-size: 0;
}

@media (max-width: 480px) {
    .ui-where-sub {
        font-size: 0.78rem;
    }
}

/* =====================================
   SEÇÃO DESTAQUE (HOME)
   ===================================== */

.ui-highlight {
    background: linear-gradient(
        135deg,
        #ED3237 0%,
        #C91F24 100%
    );
    padding: 60px 0;
    color: #fff;
}

.ui-highlight-inner {
    display: flex;
    gap: 40px;
    align-items: center;
}

/* TEXTO (ESQUERDA) */
.ui-highlight-text {
    flex: 1 1 0;
    max-width: 560px;
}

.ui-highlight-badge {
    display: inline-block;
    margin-bottom: 12px;
    padding: 6px 18px;
    background: rgba(255,255,255,0.18);
    border-radius: 999px;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 700;
}

.ui-highlight-text h2 {
    font-size: 2.2rem;
    margin-bottom: 12px;
}

.ui-highlight-text p {
    font-size: 1rem;
    opacity: 0.95;
    margin-bottom: 16px;
}

/* Lista de benefícios */
.ui-highlight-list {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
}

.ui-highlight-list li {
    position: relative;
    padding-left: 24px;
    margin-bottom: 8px;
    font-size: 0.95rem;
}

.ui-highlight-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: #FADD7B;
    font-weight: 700;
}

/* Botões */
.ui-highlight-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* IMAGEM (DIREITA) */
.ui-highlight-media {
    flex: 1 1 0;
    display: flex;
    justify-content: flex-end;
}

.ui-highlight-media img {
    width: 100%;
    max-width: 420px;    /* tamanho máximo da imagem */
    height: auto;        /* mantém proporção, NÃO achata */
    border-radius: 26px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.35);
}

/* RESPONSIVO – Tablet / Mobile */
@media (max-width: 900px) {
    .ui-highlight {
        padding: 48px 0;
    }

    .ui-highlight-inner {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .ui-highlight-text {
        max-width: 100%;
    }

    .ui-highlight-media {
        justify-content: center;
    }

    .ui-highlight-media img {
        max-width: 320px;
    }

    .ui-highlight-list li {
        padding-left: 0;
    }

    .ui-highlight-list li::before {
        position: static;
        margin-right: 6px;
    }

    .ui-highlight-actions {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .ui-highlight {
        padding: 40px 0;
    }

    .ui-highlight-text h2 {
        font-size: 1.8rem;
    }

    .ui-highlight-media img {
        max-width: 280px;
    }
}



/* =====================================
   FAÇA SEU PEDIDO
   ===================================== */

.ui-order-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.ui-order-card {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 10px 26px rgba(0,0,0,0.08);
    border: 1px solid rgba(0,0,0,0.04);
    padding: 14px 16px 16px;
}

.ui-order-card p {
    color: var(--ui-text-soft);
}

/* =====================================
   NEWSLETTER
   ===================================== */

.ui-newsletter {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.2fr);
    gap: 20px;
    align-items: center;
}

.ui-newsletter-form form {
    background: rgba(0,0,0,0.08);
    border-radius: 18px;
    padding: 14px;
}

.ui-form-row {
    margin-bottom: 10px;
}

.ui-form-row input[type="text"],
.ui-form-row input[type="email"] {
    width: 100%;
    border-radius: 999px;
    border: none;
    padding: 8px 12px;
    font-size: 0.9rem;
}

/* =====================================
   CONTATO (HOME + PÁGINA)
   ===================================== */

.ui-contact-teaser {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
}

.ui-contact {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.1fr);
    gap: 24px;
    align-items: flex-start;
}

.ui-contact-info p {
    color: var(--ui-text-soft);
}

.ui-contact-block {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(237,50,55,0.04);
    border: 1px solid rgba(237,50,55,0.12);
}

.ui-contact-form {
    background: #fff;
    border-radius: 18px;
    padding: 16px 16px 18px;
    box-shadow: 0 10px 24px rgba(0,0,0,0.07);
    border: 1px solid rgba(0,0,0,0.04);
}

.ui-contact-form h2 {
    margin-bottom: 10px;
}

.ui-contact-form .ui-form-row {
    margin-bottom: 12px;
}

.ui-contact-form label {
    display: block;
    font-size: 0.85rem;
    margin-bottom: 4px;
}

.ui-contact-form input[type="text"],
.ui-contact-form input[type="email"] {
    width: 100%;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid #e0d0b5;
    font-size: 0.9rem;
}

.ui-contact-form textarea {
    width: 100%;
    border-radius: 12px;
    border: 1px solid #e0d0b5;
    padding: 8px 12px;
    font-size: 0.9rem;
    resize: vertical;
}

.ui-contact-note {
    margin-top: 8px;
    font-size: 0.8rem;
    color: var(--ui-text-soft);
}

/* =====================================
   RESPONSIVO - TABLET
   ===================================== */

@media (max-width: 1024px) {
    .ui-header-inner,
    .site-footer-inner {
        max-width: 100%;
        padding-inline: 16px;
    }
}

/* =====================================
   RESPONSIVO - MOBILE
   ===================================== */

@media (max-width: 768px) {

    .ui-header-inner {
        padding-block: 8px;
    }

    .ui-logo-img {
        height: 64px; /* maior no mobile */
    }

    /* menu mobile */
    .ui-menu-toggle {
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .ui-nav {
        position: absolute;
        top: calc(60px + 10px);
        right: 0;
        left: 0;
        background: var(--ui-red);
        padding: 10px 16px 14px;
        border-bottom-left-radius: 18px;
        border-bottom-right-radius: 18px;
        box-shadow: 0 10px 20px rgba(0,0,0,0.25);
        z-index: 50;

        transform: translateY(-10px);
        opacity: 0;
        pointer-events: none;
        transition: transform 0.25s ease, opacity 0.25s ease;
    }

    body.nav-open .ui-nav {
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
    }

    .ui-menu {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .ui-menu a {
        font-size: 0.95rem;
    }

    body.nav-open .ui-menu-toggle-bar:nth-child(1) {
        transform: translateY(6px) rotate(45deg);
    }
    body.nav-open .ui-menu-toggle-bar:nth-child(2) {
        opacity: 0;
    }
    body.nav-open .ui-menu-toggle-bar:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg);
    }

    /* HERO SLIDER */
    .ui-hero-slider {
        max-height: none; /* deixa a imagem natural no mobile */
    }

    .ui-hero-slider-arrow {
        width: 30px;
        height: 30px;
        font-size: 18px;
    }

    /* GRIDS */
    .ui-grid--products,
    .ui-grid--recipes {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    }

    .ui-where-inner,
    .ui-highlight-grid,
    .ui-newsletter,
    .ui-contact {
        grid-template-columns: minmax(0, 1fr);
    }

    .ui-order-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .site-footer-inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .ui-contact-teaser {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* CELULARES MENORES */
@media (max-width: 480px) {
    .ui-section {
        padding-block: 24px;
    }

    .ui-section-header h2 {
        font-size: 1.3rem;
    }

    .ui-section-header p {
        font-size: 0.85rem;
    }

    .ui-hero-slider-arrow {
        width: 28px;
        height: 28px;
        font-size: 16px;
    }
}

/* =====================================
   SEÇÃO FAÇA SEU PEDIDO
   ===================================== */

.ui-order {
    background: #FADD7B;
    padding: 56px 0 60px;
}

.ui-order-header {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 32px;
}

.ui-order-eyebrow {
    display: inline-block;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #C91F24;
    font-weight: 700;
    margin-bottom: 6px;
}

.ui-order-header h2 {
    font-size: 2rem;
    margin-bottom: 8px;
    color: #C91F24;
}

.ui-order-header p {
    font-size: 0.98rem;
    color: #5c3b15;
}

/* Grid dos cards (3 colunas no desktop) */
.ui-order-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

/* Card base */
.ui-order-card {
    background: #fff;
    border-radius: 22px;
    padding: 22px 20px 20px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.12);
    border: 1px solid rgba(0,0,0,0.04);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;

    /* Hover suave */
    transform: translateY(0);
    transition:
        transform 0.18s ease-out,
        box-shadow 0.18s ease-out,
        border-color 0.18s ease-out;
}

.ui-order-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(0,0,0,0.16);
    border-color: rgba(237,50,55,0.45);
}

/* Selinho (badge) no canto superior esquerdo do card */
.ui-order-pill {
    position: absolute;
    top: 12px;
    left: 16px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    background: #ED3237;
    color: #fff;
}

.ui-order-pill--best {
    background: #ED3237;
}

.ui-order-pill--new {
    background: #C91F24;
}

.ui-order-pill--rep {
    background: #333333;
}

/* Topo do card: ícone + título + texto */
.ui-order-card-top {
    display: flex;
    gap: 14px;
    margin-bottom: 14px;
    margin-top: 10px; /* espaço por causa do selo */
}

.ui-order-icon-circle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #ED3237;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ui-order-icon-circle--light {
    background: rgba(237,50,55,0.08);
}

.ui-order-icon-circle--rep {
    background: #333333;
}

.ui-order-icon {
    font-size: 1.4rem;
}

.ui-order-card h3 {
    font-size: 1.15rem;
    margin: 0 0 4px;
    color: #1a1a1a;
}

.ui-order-card p {
    font-size: 0.92rem;
    margin: 0;
    color: #555;
}

/* Lista de benefícios */
.ui-order-list {
    list-style: none;
    padding: 0;
    margin: 14px 0 16px;
}

.ui-order-list li {
    font-size: 0.9rem;
    margin-bottom: 6px;
    position: relative;
    padding-left: 18px;
    color: #444;
}

.ui-order-list li::before {
    content: "•";
    position: absolute;
    left: 4px;
    top: -1px;
    font-size: 1.1rem;
    color: #ED3237;
}

/* Área de ações */
.ui-order-actions {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ui-btn--full {
    width: 100%;
    justify-content: center;
}

/* Estilização de botões dentro da seção pedidos */
.ui-order .ui-btn--primary {
    background: #ED3237;
    border-color: #ED3237;
    color: #fff;
}

.ui-order .ui-btn--primary:hover {
    background: #c61f24;
    border-color: #c61f24;
}

.ui-order .ui-btn--outline {
    background: #fff;
    border-color: #ED3237;
    color: #ED3237;
}

.ui-order .ui-btn--outline:hover {
    background: #ED3237;
    color: #fff;
}

.ui-order .ui-btn--secondary {
    background: #333333;
    border-color: #333333;
    color: #fff;
}

.ui-order .ui-btn--secondary:hover {
    background: #111111;
    border-color: #111111;
}

/* Link secundário, se usar */
.ui-order-link {
    font-size: 0.85rem;
    color: #C91F24;
    text-decoration: underline;
}

/* Destaque por tipo de card (só detalhes sutis) */
.ui-order-card--atacado {
    border-top: 3px solid #ED3237;
}

.ui-order-card--ifood {
    border-top: 3px solid #C91F24;
}

.ui-order-card--rep {
    border-top: 3px solid #333333;
}

/* Responsivo */
@media (max-width: 1100px) {
    .ui-order-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 800px) {
    .ui-order-grid {
        grid-template-columns: 1fr;
    }

    .ui-order {
        padding: 48px 0 52px;
    }

    .ui-order-header h2 {
        font-size: 1.7rem;
    }
}

@media (max-width: 480px) {
    .ui-order-header {
        margin-bottom: 26px;
    }

    .ui-order-card {
        padding: 20px 18px 18px;
    }
}

/* =====================================
   SEÇÃO NEWSLETTER / WHATSAPP
   ===================================== */

.ui-newsletter {
    background: #ffffff;
    min-height: 420px;              /* altura da seção */
    display: flex;
    align-items: center;            /* centraliza verticalmente */
    justify-content: center;        /* centraliza horizontalmente */
    padding: 40px 0;
}

/* container padrão centralizado, como as outras seções */
.ui-newsletter .ui-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Grid de 2 colunas: texto esquerda, formulário direita */
.ui-newsletter-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 40px;
    align-items: center; /* 👈 centraliza verticalmente as colunas */
    background: #ffffff;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
}

.ui-newsletter-text {
    max-width: 540px;
}

.ui-newsletter-eyebrow {
    display: inline-block;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #C91F24;
    font-weight: 700;
    margin-bottom: 6px;
}

.ui-newsletter-text h2 {
    font-size: 2rem;
    margin-bottom: 10px;
    color: #C91F24;
}

.ui-newsletter-text p {
    font-size: 0.98rem;
    color: #5c3b15;
}

/* Formulário (coluna direita) */
.ui-newsletter-form-wrapper {
    background: #fff;
    border-radius: 20px;
    padding: 20px 18px;
    box-shadow: 0 10px 28px rgba(0,0,0,0.08);
    border: 1px solid rgba(0,0,0,0.04);
}

.ui-newsletter-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ui-newsletter-field-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ui-newsletter-field-group label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #333;
}

.ui-newsletter-field-group input[type="text"],
.ui-newsletter-field-group input[type="tel"] {
    border-radius: 999px;
    border: 1px solid #ddd;
    padding: 8px 14px;
    font-size: 0.95rem;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    background: #fafafa;
}

.ui-newsletter-field-group input[type="text"]:focus,
.ui-newsletter-field-group input[type="tel"]:focus {
    border-color: #ED3237;
    box-shadow: 0 0 0 2px rgba(237,50,55,0.18);
    background: #ffffff;
}

.ui-newsletter-field-check {
    font-size: 0.8rem;
    color: #444;
}

.ui-newsletter-field-check label {
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

.ui-newsletter-field-check input[type="checkbox"] {
    margin-top: 3px;
}

.ui-newsletter-submit {
    margin-top: 4px;
    width: 100%;
    justify-content: center;
}

/* Botão na newsletter com as cores do tema */
.ui-newsletter .ui-btn--primary {
    background: #ED3237;
    border-color: #ED3237;
    color: #fff;
}

.ui-newsletter .ui-btn--primary:hover {
    background: #c61f24;
    border-color: #c61f24;
}

/* Feedback (mensagem de sucesso/erro) */
.ui-newsletter-feedback {
    font-size: 0.82rem;
    margin-top: 8px;
}

.ui-newsletter-feedback--success {
    color: #1b7a32;
}

.ui-newsletter-feedback--error {
    color: #b00020;
}

/* Responsivo */
@media (max-width: 900px) {
    .ui-newsletter-inner {
        grid-template-columns: 1fr;   /* vira 1 coluna no mobile */
        gap: 24px;
    }

    .ui-newsletter-text h2 {
        font-size: 1.7rem;
    }
}

@media (max-width: 480px) {
    .ui-newsletter {
        padding: 44px 0 48px;
    }

    .ui-newsletter .ui-container {
        padding: 0 16px;
    }

    .ui-newsletter-text h2 {
        font-size: 1.5rem;
    }
}

/* =====================================
   PÁGINA DE PRODUTOS (archive-produto)
   ===================================== */

.ui-produtos-hero {
    background: #FFF6E2;
    padding: 56px 0 40px;
}

.ui-produtos-hero-inner {
    display: flex;
    justify-content: space-between;
    gap: 32px;
    align-items: center;
}

.ui-produtos-eyebrow {
    display: inline-block;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: #C91F24;
    font-weight: 700;
    margin-bottom: 6px;
}

.ui-produtos-hero-inner h1 {
    font-size: 2.3rem;
    margin-bottom: 10px;
    color: #C91F24;
}

.ui-produtos-hero-inner p {
    font-size: 1rem;
    color: #5c3b15;
    max-width: 540px;
}

/* Box de dica à direita */
.ui-produtos-hero-highlight {
    background: #ffffff;
    border-radius: 18px;
    padding: 16px 18px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
    border: 1px solid rgba(0,0,0,0.04);
    max-width: 320px;
}

.ui-produtos-hero-pill {
    display: inline-block;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background: #ED3237;
    color: #fff;
    padding: 3px 9px;
    border-radius: 999px;
    margin-bottom: 6px;
}

/* Seção de grid */
.ui-produtos-grid-section {
    background: #fff;
    padding: 40px 0 60px;
}

/* Grid de cards */
.ui-produtos-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

/* Card de produto */
.ui-produto-card {
    position: relative;
    background: #fff;
    border-radius: 22px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.10);
    border: 1px solid rgba(0,0,0,0.04);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition:
        transform 0.18s ease-out,
        box-shadow 0.18s ease-out;
}

.ui-produto-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 38px rgba(0,0,0,0.15);
}

/* Badge de destaque */
.ui-produto-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #ED3237;
    color: #fff;
    font-size: 0.72rem;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 999px;
    letter-spacing: 0.08em;
    font-weight: 700;
    z-index: 2;
}

/* Imagem do produto */
.ui-produto-thumb {
    background: #f8f8f8;
    padding: 18px 18px 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 190px;
}

.ui-produto-thumb img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Corpo do card */
.ui-produto-body {
    padding: 16px 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-grow: 1;
}

.ui-produto-title {
    font-size: 1.05rem;
    margin: 0;
}

.ui-produto-title a {
    color: #1a1a1a;
}

.ui-produto-title a:hover {
    color: #ED3237;
}

.ui-produto-excerpt {
    font-size: 0.9rem;
    color: #555;
}

/* Ações do card */
.ui-produto-actions {
    margin-top: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ui-btn--small {
    font-size: 0.85rem;
    padding: 6px 14px;
    border-radius: 999px;
}

.ui-produto-receitas-link {
    font-size: 0.82rem;
}

/* Paginação */
.ui-produtos-pagination {
    margin-top: 32px;
    text-align: center;
}

.ui-produtos-pagination .page-numbers {
    display: inline-block;
    margin: 0 4px;
    padding: 6px 10px;
    font-size: 0.86rem;
    border-radius: 999px;
    border: 1px solid transparent;
}

.ui-produtos-pagination .page-numbers.current {
    background: #ED3237;
    color: #fff;
    border-color: #ED3237;
}

.ui-produtos-pagination .page-numbers:not(.current) {
    background: #f5f5f5;
    color: #333;
}

.ui-produtos-pagination .page-numbers:hover:not(.current) {
    background: #ED3237;
    color: #fff;
}

/* Estado sem produtos */
.ui-produtos-empty {
    text-align: center;
    padding: 40px 0 60px;
}

.ui-produtos-empty h2 {
    font-size: 1.6rem;
    margin-bottom: 8px;
}

/* Responsivo */
@media (max-width: 1000px) {
    .ui-produtos-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ui-produtos-hero-inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .ui-produtos-hero-highlight {
        max-width: 100%;
    }
}

@media (max-width: 640px) {
    .ui-produtos-grid {
        grid-template-columns: 1fr;
    }

    .ui-produtos-hero-inner h1 {
        font-size: 1.9rem;
    }
}

/* =====================================
   SINGLE PRODUTO
   ===================================== */

.ui-produto-hero {
    background: #FFF6E2;
    padding: 48px 0 38px;
}

.ui-produto-hero-inner {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.ui-produto-breadcrumb {
    font-size: 0.8rem;
    color: #7a6a46;
}

.ui-produto-breadcrumb a {
    color: #7a6a46;
}

.ui-produto-breadcrumb span {
    margin: 0 4px;
}

.ui-produto-hero-text .ui-produtos-eyebrow {
    display: inline-block;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #C91F24;
    font-weight: 700;
    margin-bottom: 4px;
}

.ui-produto-hero-text h1 {
    font-size: 2.3rem;
    margin-bottom: 6px;
    color: #C91F24;
}

.ui-produto-hero-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    background: #ED3237;
    color: #fff;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 8px;
}

.ui-produto-hero-intro {
    font-size: 0.98rem;
    color: #5c3b15;
    max-width: 560px;
    margin-bottom: 10px;
}

.ui-produto-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* BLOCO PRINCIPAL */
.ui-produto-main {
    background: #ffffff;
    padding: 40px 0 52px;
}

.ui-produto-main-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.1fr);
    gap: 36px;
    align-items: flex-start;
}

/* imagem */
.ui-produto-main-image {
    background: #f8f8f8;
    border-radius: 24px;
    padding: 18px;
    box-shadow: 0 16px 40px rgba(0,0,0,0.10);
    display: flex;
    justify-content: center;
    align-items: center;
}

.ui-produto-main-image img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* texto */
.ui-produto-main-content h2 {
    font-size: 1.5rem;
    margin-bottom: 10px;
    color: #C91F24;
}

.ui-produto-content-text {
    font-size: 0.95rem;
    color: #444;
    line-height: 1.6;
}

.ui-produto-main-content .ui-produto-content-text p {
    margin-bottom: 12px;
}

.ui-produto-main-cta {
    margin-top: 16px;
}

/* RECEITAS RELACIONADAS */
.ui-produto-recipes {
    background: #FFF6E2;
    padding: 42px 0 60px;
}

.ui-produto-recipes-header {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 26px;
}

.ui-produto-recipes-header h2 {
    font-size: 1.8rem;
    margin-bottom: 8px;
    color: #C91F24;
}

.ui-produto-recipes-header p {
    font-size: 0.96rem;
    color: #5c3b15;
}

/* grid de receitas */
.ui-produto-recipes-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.ui-receita-card {
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.10);
    border: 1px solid rgba(0,0,0,0.04);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.ui-receita-thumb {
    background: #f4f4f4;
    padding: 12px 12px 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 140px;
}

.ui-receita-thumb img {
    max-width: 100%;
    height: auto;
    display: block;
}

.ui-receita-body {
    padding: 14px 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ui-receita-body h3 {
    font-size: 1rem;
    margin: 0;
}

.ui-receita-body h3 a {
    color: #1a1a1a;
}

.ui-receita-body h3 a:hover {
    color: #ED3237;
}

.ui-produto-recipes-empty {
    text-align: center;
    font-size: 0.95rem;
    color: #555;
}

/* Responsivo */
@media (max-width: 1000px) {
    .ui-produto-main-inner {
        grid-template-columns: 1fr;
    }

    .ui-produto-main-image {
        max-width: 480px;
        margin: 0 auto;
    }

    .ui-produto-recipes-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .ui-produto-hero-inner h1 {
        font-size: 2rem;
    }

    .ui-produto-recipes-grid {
        grid-template-columns: 1fr;
    }
}

/* =====================================
   ARCHIVE RECEITAS
   ===================================== */

.ui-receitas-hero {
    background: #FFF6E2;
    padding: 56px 0 40px;
}

.ui-receitas-hero-inner {
    display: flex;
    justify-content: space-between;
    gap: 32px;
    align-items: flex-start;
}

.ui-receitas-eyebrow {
    display: inline-block;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: #C91F24;
    font-weight: 700;
    margin-bottom: 6px;
}

.ui-receitas-hero-inner h1 {
    font-size: 2.3rem;
    margin-bottom: 10px;
    color: #C91F24;
}

.ui-receitas-hero-inner p {
    font-size: 1rem;
    color: #5c3b15;
    max-width: 540px;
}

/* Filtro de categorias */
.ui-receitas-filter h3 {
    font-size: 0.95rem;
    margin-bottom: 6px;
    color: #333;
}

.ui-receitas-filter-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ui-receitas-filter-list a {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.8rem;
    border: 1px solid #ED3237;
    color: #ED3237;
}

.ui-receitas-filter-list a.is-active,
.ui-receitas-filter-list a:hover {
    background: #ED3237;
    color: #fff;
}

.ui-receitas-filter-empty {
    font-size: 0.85rem;
    color: #777;
}

/* Grid de receitas */
.ui-receitas-grid-section {
    background: #fff;
    padding: 40px 0 60px;
}

.ui-receitas-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

/* Card de receita (reutilizamos em vários lugares) */
.ui-receita-card {
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.10);
    border: 1px solid rgba(0,0,0,0.04);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.ui-receita-thumb {
    background: #f4f4f4;
    padding: 12px 12px 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 140px;
}

.ui-receita-thumb img {
    max-width: 100%;
    height: auto;
    display: block;
}

.ui-receita-body {
    padding: 14px 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ui-receita-body h2,
.ui-receita-body h3 {
    font-size: 1rem;
    margin: 0;
}

.ui-receita-body h2 a,
.ui-receita-body h3 a {
    color: #1a1a1a;
}

.ui-receita-body h2 a:hover,
.ui-receita-body h3 a:hover {
    color: #ED3237;
}

.ui-receita-excerpt {
    font-size: 0.9rem;
    color: #555;
}

.ui-receitas-pagination {
    margin-top: 32px;
    text-align: center;
}

.ui-receitas-pagination .page-numbers {
    display: inline-block;
    margin: 0 4px;
    padding: 6px 10px;
    font-size: 0.86rem;
    border-radius: 999px;
    border: 1px solid transparent;
}

.ui-receitas-pagination .page-numbers.current {
    background: #ED3237;
    color: #fff;
    border-color: #ED3237;
}

.ui-receitas-pagination .page-numbers:not(.current) {
    background: #f5f5f5;
    color: #333;
}

.ui-receitas-pagination .page-numbers:hover:not(.current) {
    background: #ED3237;
    color: #fff;
}

.ui-receitas-empty {
    text-align: center;
    padding: 40px 0 60px;
}

/* SINGLE RECEITA (completa) – parte que faltava complementar */

.ui-receita-hero {
    background: #FFF6E2;
    padding: 48px 0 36px;
}

.ui-receita-hero-inner {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.ui-receita-breadcrumb {
    font-size: 0.8rem;
    color: #7a6a46;
}

.ui-receita-breadcrumb a {
    color: #7a6a46;
}

.ui-receita-breadcrumb span {
    margin: 0 4px;
}

.ui-receita-hero-main {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 32px;
    align-items: center;
}

.ui-receita-eyebrow {
    display: inline-block;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #C91F24;
    font-weight: 700;
    margin-bottom: 4px;
}

.ui-receita-hero-text h1 {
    font-size: 2.3rem;
    margin-bottom: 8px;
    color: #C91F24;
}

.ui-receita-hero-intro {
    font-size: 0.98rem;
    color: #5c3b15;
    max-width: 560px;
    margin-bottom: 12px;
}

.ui-receita-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.ui-receita-hero-image img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 24px;
    box-shadow: 0 16px 40px rgba(0,0,0,0.12);
}

/* Corpo da receita */
.ui-receita-main {
    background: #ffffff;
    padding: 40px 0 50px;
}

.ui-receita-main-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 34px;
    align-items: flex-start;
}

.ui-receita-content h2 {
    font-size: 1.5rem;
    margin-bottom: 10px;
    color: #C91F24;
}

.ui-receita-content-text {
    font-size: 0.95rem;
    color: #444;
    line-height: 1.7;
}

.ui-receita-content-text p {
    margin-bottom: 12px;
}

/* Card de produto usado */
.ui-receita-product h3 {
    font-size: 1.1rem;
    margin-bottom: 10px;
    color: #C91F24;
}

.ui-receita-product-card {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.10);
    border: 1px solid rgba(0,0,0,0.04);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.ui-receita-product-thumb {
    background: #f6f6f6;
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ui-receita-product-thumb img {
    max-width: 100%;
    height: auto;
    display: block;
}

.ui-receita-product-body {
    padding: 12px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ui-receita-product-body h4 {
    font-size: 1rem;
    margin: 0;
}

.ui-receita-product-body h4 a {
    color: #1a1a1a;
}

.ui-receita-product-body h4 a:hover {
    color: #ED3237;
}

.ui-receita-product-body p {
    font-size: 0.9rem;
    color: #555;
}

.ui-receita-product-actions {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* CTA WhatsApp */
.ui-receita-whatsapp-cta {
    background: #FADD7B;
    padding: 34px 0 40px;
}

.ui-receita-whatsapp-inner {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
    justify-content: space-between;
}

.ui-receita-whatsapp-text h2 {
    font-size: 1.6rem;
    margin-bottom: 4px;
    color: #C91F24;
}

.ui-receita-whatsapp-text p {
    font-size: 0.95rem;
    color: #5c3b15;
}

/* Responsivo para receitas */
@media (max-width: 1000px) {
    .ui-receitas-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ui-receitas-hero-inner {
        flex-direction: column;
    }

    .ui-receita-hero-main {
        grid-template-columns: 1fr;
    }

    .ui-receita-main-inner {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .ui-receitas-grid {
        grid-template-columns: 1fr;
    }

    .ui-receita-hero-text h1 {
        font-size: 2rem;
    }

    .ui-receita-whatsapp-inner {
        flex-direction: column;
        align-items: flex-start;
    }
}

.ui-btn--primary {
    background: #ED3237;
    border-color: #ED3237;
    color: #fff;
}

.ui-btn--primary:hover {
    background: #c61f24;
    border-color: #c61f24;
}