/* =============================================
   Gráfica Grafitte — CSS Principal
   Paleta: ##b13218 (vermelho) | #E85D04 (laranja)
   ============================================= */

:root {
    --gg-red: #b13218;
    --gg-orange: #E85D04;
    --gg-bg-light: #FFF5F0;
    --gg-text: #1A1A1A;
    --gg-text-muted: #555555;
    --gg-gradient: linear-gradient(135deg, #CC2200 0%, #E85D04 100%);
    --gg-font: 'Poppins', 'Segoe UI', sans-serif;
}

/* ---- Base ---- */
body {
    font-family: var(--gg-font);
    color: var(--gg-text);
    font-size: 1rem;
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 { font-family: var(--gg-font); font-weight: 700; }

/* ---- Navbar ---- */
.gg-navbar {
    background: var(--gg-red) !important;
    box-shadow: 0 2px 12px rgba(0,0,0,.15);
}
.gg-navbar .nav-link { color: rgba(255,255,255,.9) !important; font-weight: 500; transition: color .2s; }
.gg-navbar .nav-link:hover { color: #fff !important; }
.gg-navbar .dropdown-menu { border: none; box-shadow: 0 8px 24px rgba(0,0,0,.12); border-radius: 8px; }
.gg-navbar .dropdown-item { font-size: .9rem; padding: .5rem 1rem; }
.gg-navbar .dropdown-item:hover { background: var(--gg-bg-light); color: var(--gg-red); }

/* ---- Buttons ---- */
.gg-btn-primary {
    background: var(--gg-gradient);
    border: none;
    color: #fff;
    font-weight: 600;
    border-radius: 6px;
    transition: opacity .2s, transform .1s;
}
.gg-btn-primary:hover { opacity: .92; color: #fff; transform: translateY(-1px); }

.gg-btn-outline-primary {
    border: 2px solid var(--gg-red);
    color: var(--gg-red);
    font-weight: 600;
    border-radius: 6px;
    background: transparent;
    transition: all .2s;
}
.gg-btn-outline-primary:hover { background: var(--gg-red); color: #fff; }

.gg-btn-whatsapp {
    background: #25D366;
    border: none;
    color: #fff;
    font-weight: 600;
    border-radius: 6px;
    transition: background .2s, transform .1s;
}
.gg-btn-whatsapp:hover { background: #1ebe5d; color: #fff; transform: translateY(-1px); }

/* ---- Icons ---- */
.gg-icon { color: var(--gg-red); }

/* ---- Section titles ---- */
.gg-section-title {
    color: var(--gg-text);
    font-weight: 700;
    position: relative;
    display: inline-block;
    padding-bottom: .5rem;
    margin-bottom: 1.5rem;
}
.gg-section-title::after {
    content: '';
    position: absolute;
    left: 0; bottom: 0;
    width: 48px; height: 3px;
    background: var(--gg-gradient);
    border-radius: 2px;
}

/* ---- Hero / Slider ---- */
.gg-hero { position: relative; }
.gg-swiper { height: 480px; }
@media (max-width: 768px) { .gg-swiper { height: 320px; } }

.gg-hero-slide {
    background: var(--gg-gradient);
    background-size: cover;
    background-position: center;
    position: relative;
}
.gg-hero-slide::after {
    content: '';
    position: absolute; inset: 0;
    background: rgba(0,0,0,.4);
}
.gg-hero-content {
    position: relative; z-index: 2;
    color: #fff;
    max-width: 640px;
}
.gg-hero-content h1 { text-shadow: 0 2px 8px rgba(0,0,0,.3); }
.gg-hero-default {
    background: var(--gg-gradient);
    min-height: 380px;
}

/* Swiper custom colors */
.swiper-button-next, .swiper-button-prev { color: #fff !important; }
.swiper-pagination-bullet-active { background: #fff !important; }

/* ---- Cards de categoria ---- */
.gg-card-categoria {
    display: block;
    text-decoration: none;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,.08);
    transition: box-shadow .2s, transform .2s;
    background: #fff;
}
.gg-card-categoria:hover { box-shadow: 0 8px 28px rgba(204,34,0,.18); transform: translateY(-4px); }
.gg-card-img {
    width: 100%; height: 200px;
    object-fit: cover;
    display: block;
}
.gg-card-img-placeholder {
    width: 100%; height: 200px;
    background: var(--gg-bg-light);
    display: flex; align-items: center; justify-content: center;
    color: #ccc;
}
.gg-card-body { padding: 1rem; }
.gg-card-body h5 { color: var(--gg-text); margin-bottom: .25rem; }

/* ---- Cards de produto ---- */
.gg-card-produto {
    display: block;
    text-decoration: none;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,.07);
    background: #fff;
    transition: box-shadow .2s, transform .2s;
}
.gg-card-produto:hover { box-shadow: 0 6px 24px rgba(204,34,0,.14); transform: translateY(-3px); }
.gg-card-img-wrapper { overflow: hidden; }
.gg-card-produto-img { width: 100%; height: 180px; object-fit: cover; transition: transform .3s; display: block; }
.gg-card-produto:hover .gg-card-produto-img { transform: scale(1.04); }
.gg-card-img-placeholder-sm {
    height: 180px; background: var(--gg-bg-light);
    display: flex; align-items: center; justify-content: center;
}
.gg-card-titulo { color: var(--gg-text); font-weight: 600; font-size: .95rem; }

/* ---- Diferenciais ---- */
.gg-diferencial { padding: 1.5rem 1rem; }
.gg-diferencial .gg-icon { display: block; margin: 0 auto .75rem; }

/* ---- CTA Section ---- */
.gg-section-cta {
    background: var(--gg-gradient);
    color: #fff;
}
.gg-section-cta h2 { color: #fff; }

/* ---- Category sidebar ---- */
.gg-cat-link {
    display: block;
    color: var(--gg-text-muted);
    text-decoration: none;
    padding: .35rem .75rem;
    border-radius: 6px;
    font-size: .9rem;
    transition: background .15s, color .15s;
}
.gg-cat-link:hover, .gg-cat-link.active {
    background: var(--gg-bg-light);
    color: var(--gg-red);
    font-weight: 600;
}

/* ---- Gallery ---- */
.gg-gallery-main { width: 100%; max-height: 440px; object-fit: cover; cursor: zoom-in; }
.gg-gallery-placeholder { height: 380px; background: var(--gg-bg-light); }
.gg-thumb { width: 72px; height: 72px; object-fit: cover; border-radius: 6px; border: 2px solid transparent; cursor: pointer; transition: border-color .15s; }
.gg-thumb:hover { border-color: var(--gg-red); }
.gg-thumb-link { text-decoration: none; }

/* ---- Badges ---- */
.gg-badge { background: var(--gg-bg-light); color: var(--gg-red); font-weight: 600; }

/* ---- Links ---- */
.gg-link { color: var(--gg-red); text-decoration: none; }
.gg-link:hover { color: var(--gg-orange); text-decoration: underline; }

/* ---- Footer ---- */
.gg-footer { background: #1A1A1A; color: #ccc; }
.gg-footer-heading { color: #fff; }
.gg-footer-link { color: #aaa; text-decoration: none; transition: color .15s; display: inline-block; margin-bottom: .2rem; }
.gg-footer-link:hover { color: var(--gg-orange); }
.gg-footer-bottom { background: #111; color: #666; border-top: 1px solid #2a2a2a; }
.gg-footer .gg-icon { color: var(--gg-orange); }
.gg-social-icon {
    width: 36px; height: 36px; border-radius: 50%;
    background: #333; color: #ccc;
    display: inline-flex; align-items: center; justify-content: center;
    text-decoration: none; transition: background .2s, color .2s;
}
.gg-social-icon:hover { background: var(--gg-red); color: #fff; }

/* ---- WhatsApp float ---- */
.gg-whatsapp-float {
    position: fixed;
    bottom: 28px; right: 28px;
    width: 58px; height: 58px;
    background: #25D366;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 1.6rem;
    box-shadow: 0 4px 20px rgba(0,0,0,.25);
    text-decoration: none;
    z-index: 1050;
    animation: gg-pulse 2s infinite;
    transition: transform .2s;
}
.gg-whatsapp-float:hover { color: #fff; transform: scale(1.1); }
@keyframes gg-pulse {
    0%, 100% { box-shadow: 0 4px 20px rgba(37,211,102,.4); }
    50% { box-shadow: 0 4px 32px rgba(37,211,102,.7); }
}

/* ---- Breadcrumb ---- */
.breadcrumb-item a { color: var(--gg-red); text-decoration: none; }
.breadcrumb-item a:hover { text-decoration: underline; }

/* ---- Pagination ---- */
.page-link { color: var(--gg-red); }
.page-item.active .page-link { background: var(--gg-red); border-color: var(--gg-red); }

/* ---- Sections alternadas ---- */
.gg-section-categorias { background: #fff; }
.gg-section-diferenciais { background: var(--gg-bg-light); }

/* ---- Responsive ---- */
@media (max-width: 576px) {
    .gg-swiper { height: 260px; }
    .gg-card-img { height: 160px; }
    .gg-card-produto-img { height: 150px; }
    .gg-hero-content h1 { font-size: 1.5rem; }
    .gg-hero-content .lead { font-size: .95rem; }
}