/* ===================================================
   drogal.css — Design System completo sem Tailwind
   Idêntico ao layout_versao_001.html
   =================================================== */

/* ---------- Reset & Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --blue:      #004C97;
    --blue-lt:   #E6F0FA;
    --orange:    #F37021;
    --red:       #E3000F;
    --red-dark:  #B90000;
    --red-logo:  #CC0000;
    --green:     #00994D;
    --green-btn: #48C7A3;
    --green-hover:#3ba889;
    --price-blue:#00AEEF;
    --gray-bg:   #F5F5F5;
    --gray-f4:   #F4F4F4;
    --gray-50:   #F9FAFB;
    --gray-100:  #F3F4F6;
    --gray-200:  #E5E7EB;
    --gray-300:  #D1D5DB;
    --gray-400:  #9CA3AF;
    --gray-500:  #6B7280;
    --gray-600:  #4B5563;
    --gray-700:  #374151;
    --dark:      #333333;
    --text:      #4A4A4A;
    --section-title: #667788;
    --shadow-sm: 0 1px 3px rgba(0,0,0,.1);
    --shadow-md: 0 4px 12px rgba(0,0,0,.1);
    --shadow-lg: 0 10px 25px rgba(0,0,0,.12);
    --radius-full: 9999px;
    --radius-xl:   1rem;
    --radius-2xl:  1.25rem;
}

html { scroll-behavior: smooth; }

body {
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--text);
    background: var(--gray-50);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
button { cursor: pointer; font-family: inherit; background: none; border: none; }
input { font-family: inherit; }
ul, ol { list-style: none; }

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

.hide-scroll::-webkit-scrollbar { display: none; }
.hide-scroll { -ms-overflow-style: none; scrollbar-width: none; }

/* ---------- Utility ---------- */
.container, .container-xl { max-width: 1280px; margin: 0 auto; padding: 0 1rem; }
.hidden { display: none !important; }

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---------- Top Promo Bar Yellow ---------- */
.topbar-yellow {
    background: #f2b900;
    color: #b90000;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 1rem;
    overflow: hidden;
    border-bottom: 1px solid #e5a700;
}
.topbar-yellow-inner {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}
.topbar-yellow-left {
    display: flex;
    align-items: center;
    gap: .5rem;
}
.topbar-yellow-left .gen-title {
    font-size: 1.05rem;
    color: #b90000;
}
.topbar-yellow-left .gen-title strong {
    font-weight: 800;
}
.topbar-yellow-left .gen-title em {
    font-style: italic;
    font-weight: 600;
}
.topbar-yellow-btn {
    background: #b90000;
    color: #fff;
    font-size: .78rem;
    font-weight: 700;
    padding: .3rem .9rem;
    border-radius: 9999px;
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s;
    box-shadow: 0 2px 4px rgba(0,0,0,.15);
}
.topbar-yellow-btn:hover {
    background: #8e0000;
}

/* ---------- Header ---------- */
.site-header {
    background: #fff;
    position: sticky;
    top: 0;
    z-index: 50;
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: .75rem 1rem;
}

/* ── Mobile: hamburger | logo centralizado | carrinho ── */
@media (max-width: 768px) {
    .header-inner {
        padding: .6rem 1rem;
        gap: 0;
        position: relative;
    }
    .header-inner > div:first-child {
        flex: 1;
        display: flex;
        justify-content: flex-start;
    }
    .header-inner .drogal-logo {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
    .header-inner .header-actions {
        flex: 1;
        justify-content: flex-end;
    }
    .topbar-yellow { height: 36px; }
    .topbar-yellow-left .gen-title { font-size: .85rem; }
    .topbar-yellow-btn { font-size: .7rem; padding: .2rem .6rem; }
}

/* Logo */
.drogal-logo {
    display: flex;
    align-items: center;
    background: #cc0000;
    color: #fff;
    padding: .25rem .7rem;
    border-radius: 9999px;
    text-decoration: none;
    flex-shrink: 0;
    gap: .3rem;
    box-shadow: 0 0 0 2px #004C97;
}
.drogal-logo .plus-icon {
    background: #fff;
    color: #cc0000;
    font-size: 1rem;
    width: 1.3rem;
    height: 1.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    font-weight: 900;
}
.drogal-logo span {
    font-size: 1.35rem;
    font-weight: 800;
    font-style: italic;
    letter-spacing: -.03em;
}

/* Mobile menu button */
.btn-menu {
    font-size: 1.4rem;
    color: var(--blue);
    display: none;
    padding: .25rem;
}

/* Search */
.header-search {
    flex: 1;
    max-width: 580px;
    display: flex;
}
.header-search-wrap { position: relative; width: 100%; display: flex; }
.header-search input {
    flex: 1;
    background: #f2f3f5;
    border: 1px solid #e5e7eb;
    border-radius: var(--radius-full);
    padding: .65rem 3rem .65rem 1.25rem;
    font-size: .88rem;
    color: var(--gray-600);
    outline: none;
    transition: border-color .2s, box-shadow .2s;
}
.header-search input:focus { border-color: var(--blue); background: #fff; }
.header-search button {
    position: absolute;
    right: 0; top: 0;
    height: 100%;
    padding: 0 1.1rem;
    color: var(--gray-500);
    border-radius: var(--radius-full);
    transition: color .15s;
}
.header-search button:hover { color: var(--blue); }

/* User Actions */
.header-actions {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}
.action-link {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-size: .82rem;
    color: #4b5563;
    text-decoration: none;
    white-space: nowrap;
    transition: color .15s;
}
.action-link:hover { color: var(--blue); }
.action-link i { font-size: 1.15rem; color: #6b7280; }
.action-link .label { font-weight: 500; }

.cart-btn {
    position: relative;
    color: #0090d0;
    font-size: 1.55rem;
    transition: color .15s;
    padding: .1rem;
    display: flex;
    align-items: center;
}
.cart-btn:hover { color: #0077b6; }
.cart-badge {
    position: absolute;
    top: -.4rem; right: -.5rem;
    background: #cc0000;
    color: #fff;
    font-size: .62rem;
    font-weight: 700;
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Mobile search (below header row) */
.mobile-search { padding: .5rem 1rem .75rem; display: none; }
.mobile-search input {
    width: 100%;
    background: #f2f3f5;
    border: none;
    border-radius: var(--radius-full);
    padding: .6rem 2.5rem .6rem 1rem;
    font-size: .85rem;
    outline: none;
}

/* ---------- Nav Categories ---------- */
.cat-nav { border-top: 1px solid #f0f0f0; border-bottom: 1px solid #e5e5e5; background: #fff; }
.cat-nav-inner {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    overflow-x: auto;
    -ms-overflow-style: none; scrollbar-width: none;
}
.cat-nav-inner::-webkit-scrollbar { display: none; }
.cat-nav-inner a {
    display: block;
    padding: .65rem 0;
    font-size: .83rem;
    font-weight: 500;
    color: #555555;
    white-space: nowrap;
    transition: color .15s;
}
.cat-nav-inner a:hover { color: var(--blue); }
.cat-nav-inner a.all-cats {
    font-weight: 600;
    color: #444;
    display: flex;
    align-items: center;
    gap: .4rem;
}
}

/* ---------- Main Content ---------- */
main { flex: 1; }

/* ---------- Banner Carousel ---------- */
.banner-section {
    overflow: hidden;
    padding: 1.25rem 1rem 0;
    max-width: 1280px;
    margin: 0 auto;
}
.banner-track-wrap {
    position: relative;
    border-radius: var(--radius-2xl);
    overflow: hidden;
}
.banner-track {
    display: flex;
    transition: transform .5s ease;
}
.banner-slide { min-width: 100%; position: relative; }
.banner-slide img { width: 100%; height: auto; object-fit: cover; display: block; }
.banner-slide img.mobile { display: none; }

.banner-btn {
    position: absolute;
    top: 50%; transform: translateY(-50%);
    background: rgba(255,255,255,.9);
    color: var(--gray-600);
    width: 2.5rem; height: 2.5rem;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    box-shadow: var(--shadow-md);
    z-index: 2;
    font-size: .9rem;
    transition: background .15s;
}
.banner-btn:hover { background: #fff; }
.banner-btn.prev { left: 1rem; }
.banner-btn.next { right: 1rem; }

.banner-dots {
    position: absolute;
    bottom: .75rem; left: 0; right: 0;
    display: flex; justify-content: center; gap: .5rem;
    z-index: 2;
}
.banner-dot {
    width: .55rem; height: .55rem;
    border-radius: 50%;
    background: rgba(255,255,255,.5);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background .2s, width .2s;
}
.banner-dot.active { background: #fff; }

/* ---------- Circular Categories ---------- */
.cat-circles-section { padding: 2rem 0; }
.cat-circles-wrap {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1rem .5rem;
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    justify-content: space-between;
}
.cat-circle-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    min-width: 80px;
    text-decoration: none;
    color: var(--gray-600);
}
.cat-circle-img {
    width: 4rem; height: 4rem;
    border-radius: 50%;
    background: var(--gray-100);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.cat-circle-img img { width: 100%; height: 100%; object-fit: cover; }
.cat-circle-label {
    font-size: .65rem;
    font-weight: 500;
    text-align: center;
    line-height: 1.3;
    width: 5rem;
}

/* ---------- Advantages Bar ---------- */
.advantages-bar {
    background: #fff;
    border-top: 1px solid var(--gray-100);
    border-bottom: 1px solid var(--gray-100);
    padding: 1.5rem 0;
}
.advantages-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1rem;
}
.advantage-item { display: flex; align-items: center; gap: 1rem; }
.advantage-item i { font-size: 1.8rem; color: var(--blue); flex-shrink: 0; }
.advantage-item h4 { font-size: .8rem; font-weight: 700; color: var(--gray-700); }
.advantage-item p  { font-size: .7rem; color: var(--gray-500); margin-top: .1rem; }

/* ---------- Product Rows ---------- */
.product-section { padding: 2rem 0; }
.product-section-inner { padding: 0 1rem; max-width: 1280px; margin: 0 auto; }

.row-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
    gap: 1rem;
}
.row-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--section-title);
}
.row-see-all {
    font-size: .82rem;
    font-weight: 700;
    color: var(--blue);
    text-decoration: none;
    white-space: nowrap;
}
.row-see-all:hover { text-decoration: underline; }

/* Desktop: rail horizontal com scroll */
.product-rail-wrap { position: relative; }
.product-rail {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    padding-bottom: .75rem;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.product-rail::-webkit-scrollbar { display: none; }

/* Rail navigation buttons */
.rail-btn {
    position: absolute;
    top: 50%; transform: translateY(-50%);
    width: 2.2rem; height: 2.2rem;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--gray-200);
    color: var(--gray-400);
    display: flex; align-items: center; justify-content: center;
    box-shadow: var(--shadow-sm);
    z-index: 2;
    font-size: .8rem;
    transition: box-shadow .15s, color .15s;
}
.rail-btn:hover { box-shadow: var(--shadow-md); color: var(--blue); }
.rail-btn.prev { left: -.7rem; }
.rail-btn.next { right: -.7rem; }

/* ---------- Product Card ---------- */
.product-card {
    flex-shrink: 0;
    width: 240px;
    background: #fff;
    border: 1px solid var(--gray-100);
    border-radius: var(--radius-2xl);
    padding: 1.1rem;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: box-shadow .25s;
}
.product-card:hover {
    box-shadow: 0 10px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.1);
}

/* Mobile: 2 colunas em grid fixo */
@media (max-width: 768px) {
    .product-rail-wrap .rail-btn { display: none !important; }
    .product-rail {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        overflow-x: unset;
        gap: .75rem;
    }
    .product-card {
        width: 100%;
        min-width: unset;
        flex-shrink: unset;
        padding: .85rem .75rem;
    }
    .card-img-link {
        height: 7.5rem;
    }
    .card-img-link img { max-width: 100px; }
    .card-price { font-size: 1.1rem; }
    .card-actions { flex-direction: column; gap: .4rem; }
    .qty-control { justify-content: center; }
    .btn-buy { width: 100%; justify-content: center; }
}

.card-badge {
    position: absolute;
    top: 1rem; right: 1rem;
    background: #FF4444;
    color: #fff;
    font-size: .65rem;
    font-weight: 700;
    padding: .15rem .5rem;
    border-radius: var(--radius-full);
    z-index: 1;
}

.card-img-link {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 10rem;
    margin-bottom: 1rem;
    overflow: hidden;
}
.card-img-link img {
    max-height: 100%;
    max-width: 140px;
    object-fit: contain;
    transition: transform .3s;
}
.product-card:hover .card-img-link img { transform: scale(1.05); }

.card-brand {
    font-size: .65rem;
    font-weight: 700;
    color: var(--gray-400);
    text-transform: uppercase;
    margin-bottom: .2rem;
}
.card-name {
    font-size: .8rem;
    font-weight: 500;
    color: var(--gray-700);
    line-height: 1.4;
    min-height: 2.4em;
    margin-bottom: .75rem;
    transition: color .15s;
}
.card-name:hover { color: var(--blue); }

.card-price-old {
    font-size: .72rem;
    color: var(--gray-400);
    text-decoration: line-through;
    display: block;
    min-height: 1em;
}
.card-price {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--price-blue);
    display: flex;
    align-items: baseline;
    gap: .2rem;
    margin-bottom: 1rem;
}
.card-price .currency {
    font-size: .75rem;
    font-weight: 500;
    color: var(--gray-500);
}

/* Card actions row */
.card-actions {
    display: flex;
    gap: .5rem;
    align-items: center;
}
.qty-control {
    display: flex;
    align-items: center;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-full);
    padding: .25rem .4rem;
    background: #fff;
    gap: .1rem;
}
.qty-btn {
    width: 1.2rem;
    height: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-400);
    font-size: .55rem;
    border-radius: 50%;
    transition: color .15s;
}
.qty-btn:hover { color: var(--gray-600); }
.qty-input {
    width: 1.5rem;
    text-align: center;
    font-size: .8rem;
    font-weight: 600;
    border: none;
    outline: none;
    color: var(--gray-700);
    background: transparent;
}
.btn-buy {
    flex: 1;
    background: var(--green-btn);
    color: #fff;
    font-weight: 700;
    font-size: .78rem;
    padding: .55rem .75rem;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    transition: background .15s;
    border: none;
}
.btn-buy:hover { background: var(--green-hover); }

/* ---------- Mid Banners ---------- */
.mid-banners { padding: 1rem 0; }
.mid-banners .container-xl { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.mid-banner-link { border-radius: var(--radius-2xl); overflow: hidden; display: block; }
.mid-banner-link img { width: 100%; height: auto; object-fit: cover; transition: transform .5s; }
.mid-banner-link:hover img { transform: scale(1.03); }

/* ---------- Ofertas Section ---------- */
.offers-grid-section { padding: 3rem 0; background: #fff; }
.offers-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}
.offer-bubble-wrap {
    display: flex;
    flex-direction: column;
}
.offer-bubble {
    background: #e6f4fd;
    border-radius: var(--radius-full);
    height: 9rem;
    display: flex;
    align-items: center;
    position: relative;
    padding: 0 1rem 0 4.5rem;
    margin-bottom: 1.25rem;
    overflow: hidden;
}
.offer-bubble-img {
    position: absolute;
    left: -.5rem; bottom: 0;
    width: 8.5rem; height: 8.5rem;
    object-fit: contain;
    z-index: 1;
}
.offer-bubble-text {
    margin-left: auto;
    text-align: right;
    z-index: 2;
}
.offer-bubble-text .up  { font-size: .72rem; color: var(--gray-600); }
.offer-bubble-text .pct { font-size: 2.5rem; font-weight: 900; color: var(--blue); line-height: 1; }
.offer-bubble-text .off { font-size: 1.1rem; font-weight: 900; color: var(--blue); }
.offer-bubble-text .price { font-size: 1.8rem; font-weight: 900; color: var(--blue); line-height: 1; }

.offer-description { font-size: .72rem; color: var(--gray-500); margin-bottom: .2rem; }
.offer-title       { font-weight: 700; color: var(--gray-700); font-size: .88rem; margin-bottom: .1rem; }
.offer-sub         { font-size: .8rem; color: var(--gray-600); margin-bottom: .4rem; }
.offer-link        { font-size: .8rem; font-weight: 700; color: var(--blue); text-decoration: none; }
.offer-link:hover  { text-decoration: underline; }

/* ---------- Brands ---------- */
.brands-section { padding: 3rem 0; background: var(--gray-50); }
.brands-scroll {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    justify-content: center;
    padding-bottom: .5rem;
}
.brand-circle {
    width: 7rem; height: 7rem;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--gray-100);
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    text-decoration: none;
    transition: box-shadow .2s;
}
.brand-circle:hover { box-shadow: var(--shadow-md); }
.brand-circle img { max-width: 70%; max-height: 70%; object-fit: contain; }

/* ---------- Footer ---------- */
.site-footer {
    background: #F8F9FA;
    border-top: 1px solid var(--gray-200);
    padding: 3rem 0 1.5rem;
    margin-top: auto;
}
.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
    gap: 2rem;
    margin-bottom: 3rem;
}
.footer-heading {
    font-weight: 700;
    color: var(--section-title);
    font-size: .88rem;
    margin-bottom: 1rem;
}
.footer-links { display: flex; flex-direction: column; gap: .5rem; }
.footer-links a {
    font-size: .8rem;
    color: var(--gray-500);
    text-decoration: none;
    transition: color .15s;
}
.footer-links a:hover { color: var(--blue); }

/* App card */
.app-card {
    background: var(--blue);
    border-radius: var(--radius-xl);
    padding: .75rem;
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 2rem;
    position: relative;
    overflow: hidden;
}
.app-card img.qr { width: 4rem; height: 4rem; border-radius: 8px; background: #fff; padding: .2rem; position: relative; z-index: 1; }
.app-card .text  { color: #fff; font-size: .7rem; font-weight: 700; font-style: italic; line-height: 1.3; position: relative; z-index: 1; }
.app-card .ghost-phone { position: absolute; right: -1rem; bottom: -1rem; font-size: 4rem; color: rgba(255,255,255,.15); }

/* Contact pills */
.contact-pill {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    border-radius: var(--radius-full);
    padding: .6rem 1rem;
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    margin-bottom: .6rem;
    transition: box-shadow .15s;
}
.contact-pill:hover { box-shadow: var(--shadow-md); }
.contact-pill .label { font-size: .68rem; color: var(--gray-500); display: block; }
.contact-pill .value { font-size: .8rem; font-weight: 700; color: var(--dark); }
.contact-pill i { color: var(--blue); }

/* Social icons */
.social-row { display: flex; gap: .75rem; margin-top: 1.5rem; }
.social-icon {
    width: 2.2rem; height: 2.2rem;
    border-radius: 50%;
    background: #fff;
    box-shadow: var(--shadow-sm);
    display: flex; align-items: center; justify-content: center;
    color: var(--blue);
    font-size: .9rem;
    text-decoration: none;
    transition: background .15s, color .15s;
}
.social-icon:hover { background: var(--blue); color: #fff; }

/* Payment icons */
.payment-icons { display: flex; gap: .6rem; flex-wrap: wrap; font-size: 1.5rem; color: var(--gray-400); }
.payment-icons .pix { color: #00B29B; }

/* Footer legal */
.footer-legal {
    border-top: 1px solid var(--gray-200);
    padding-top: 1.5rem;
    font-size: .65rem;
    color: var(--gray-500);
    line-height: 1.7;
    text-align: justify;
}
.footer-legal p + p { margin-top: .75rem; }

/* ---------- Mobile Menu ---------- */
.mobile-menu-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 55;
    display: none;
    backdrop-filter: blur(2px);
}
.mobile-menu {
    position: fixed;
    inset-y: 0; left: 0;
    width: 85%; max-width: 320px;
    background: #fff;
    z-index: 60;
    display: flex;
    flex-direction: column;
    transform: translateX(-100%);
    transition: transform .3s ease;
    overflow-y: auto;
}
.mobile-menu.open { transform: translateX(0); }
.mobile-menu-overlay.open { display: block; }

.mobile-menu-header {
    background: var(--blue);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    font-weight: 700;
}
.mobile-menu-header button { color: #fff; font-size: 1.2rem; }

.mobile-menu-auth { background: var(--gray-50); border-bottom: 1px solid var(--gray-100); padding: .75rem 1rem; }
.mobile-menu-auth a.btn-auth {
    display: block;
    text-align: center;
    font-weight: 700;
    color: var(--blue);
    border: 2px solid var(--blue);
    border-radius: 8px;
    padding: .5rem;
    transition: background .15s, color .15s;
}
.mobile-menu-auth a.btn-auth:hover { background: var(--blue); color: #fff; }

.mobile-menu-nav a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    border-bottom: 1px solid var(--gray-100);
    font-size: .82rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--dark);
    transition: background .1s;
}
.mobile-menu-nav a:hover { background: var(--gray-50); }
.mobile-menu-nav a i { color: var(--gray-300); font-size: .7rem; }

/* ---------- Section Titles ---------- */
.section-heading {
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--section-title);
    margin-bottom: 1.5rem;
}

/* ---------- Mobile Bottom Nav (hidden on desktop) ---------- */
.mobile-bottom-nav { display: none; }

/* =========================================================
   RESPONSIVE — Breakpoints
   ========================================================= */

/* ── Tablet ── */
@media (max-width: 1024px) {
    .footer-grid { grid-template-columns: 1fr 1fr 1fr; }
    .offers-grid { grid-template-columns: repeat(2, 1fr); }
    .advantages-grid { grid-template-columns: repeat(2, 1fr); }
}

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

    /* --- Header --- */
    .btn-menu { display: flex !important; }
    .header-search { display: none; }
    .cat-nav { display: none; }
    .advantages-bar { display: none; }
    .mobile-search { display: block; }
    .action-link.lg-only { display: none !important; }
    .action-link.md-only { display: none !important; }

    /* --- Banner --- */
    .banner-section { padding: .5rem .5rem 0; }
    .banner-btn { width: 1.8rem; height: 1.8rem; font-size: .7rem; }
    .banner-btn.prev { left: .4rem; }
    .banner-btn.next { right: .4rem; }
    .banner-slide img.desktop { display: none; }
    .banner-slide img.mobile  { display: block; }

    /* --- Circular Categories --- */
    .cat-circles-section { padding: 1.25rem .75rem; }
    .cat-circles-wrap { justify-content: flex-start; gap: 1rem; }
    .cat-circle-img { width: 3.5rem; height: 3.5rem; }
    .cat-circle-label { font-size: .6rem; width: 4rem; }

    /* --- Mid Banners --- */
    .mid-banners .container-xl { grid-template-columns: 1fr; gap: .75rem; }

    /* --- Ofertas (Encontre As Melhores Ofertas) --- */
    .offers-grid-section { padding: 1.75rem 0; }
    .offers-grid {
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }
    .offer-bubble {
        height: 7rem;
        padding: 0 .75rem 0 3.5rem;
    }
    .offer-bubble-img { width: 6.5rem; height: 6.5rem; left: -.75rem; }
    .offer-bubble-text .pct { font-size: 1.8rem; }
    .offer-bubble-text .off { font-size: .9rem; }
    .offer-title { font-size: .8rem; }
    .offer-description { font-size: .65rem; }
    .offer-sub { font-size: .72rem; }

    /* --- Brands --- */
    .brands-section { padding: 1.75rem 0; }
    .brands-scroll { justify-content: flex-start; }
    .brand-circle { width: 5.5rem; height: 5.5rem; }

    /* --- Product Section title --- */
    .product-section { padding: 1.25rem 0; }
    .row-title { font-size: 1.05rem; }
    .section-heading { font-size: 1.1rem; margin-bottom: 1rem; }

    /* --- Footer --- */
    .site-footer { padding: 2rem 0 5rem; }
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .footer-grid > div {
        border-bottom: 1px solid var(--gray-200);
        padding: 1.1rem 0;
    }
    .footer-grid > div:last-child { border-bottom: none; }

    /* Accordion footer em mobile */
    .footer-heading {
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 0;
        user-select: none;
    }
    .footer-heading::after {
        content: '+';
        font-size: 1.1rem;
        font-weight: 400;
        color: var(--gray-400);
        transition: transform .2s;
    }
    .footer-heading.open::after { content: '−'; }
    .footer-links,
    .footer-heading + .footer-links {
        max-height: 0;
        overflow: hidden;
        transition: max-height .3s ease;
    }
    .footer-heading.open + .footer-links {
        max-height: 400px;
        margin-top: .75rem;
    }
    /* Primeira coluna (app/contato/social) sempre aberta */
    .footer-grid > div:first-child .footer-heading { cursor: default; }
    .footer-grid > div:first-child .footer-heading::after { display: none; }
    .footer-grid > div:first-child .footer-links,
    .footer-grid > div:first-child .app-card,
    .footer-grid > div:first-child .contact-pill,
    .footer-grid > div:first-child .social-row {
        max-height: none;
    }

    /* Payment icons sempre visíveis */
    .payment-icons { margin-top: .5rem; }

    /* Barra de navegação mobile fixa em baixo */
    .mobile-bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0; left: 0; right: 0;
        background: #fff;
        border-top: 1px solid var(--gray-200);
        z-index: 45;
        box-shadow: 0 -2px 8px rgba(0,0,0,.08);
    }
    .mobile-bottom-nav a {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: .25rem;
        padding: .6rem .25rem;
        font-size: .6rem;
        color: var(--gray-500);
        text-decoration: none;
        font-weight: 600;
        transition: color .15s;
    }
    .mobile-bottom-nav a:hover,
    .mobile-bottom-nav a.active { color: var(--blue); }
    .mobile-bottom-nav a i { font-size: 1.2rem; }
}

/* ── Small Mobile ── */
@media (max-width: 400px) {
    .drogal-logo span { font-size: 1.1rem; }
    .offers-grid { grid-template-columns: 1fr; }
    .offer-bubble { height: 8rem; }
    .footer-legal { font-size: .6rem; }
}