/* Page stylesheet: Home (index)
   Purpose: layout/visual styles specific to index.php
   Depends on CSS vars defined in page :root (primary/secondary/text/bg)
   Note: keep shared/global rules in /assets/css/main.css */
* { margin:0; padding:0; box-sizing:border-box; }
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: var(--text);
    background: linear-gradient(180deg, #f6f8fb 0%, var(--bg) 100%);
    -webkit-font-smoothing:antialiased;
}

.container { max-width:1200px; margin:0 auto; padding:0 20px; }

header.hero {
    background: linear-gradient(180deg, var(--primary) 0%, var(--secondary) 100%);
    color: #fff;
    padding: 30px 0 18px;
    position: sticky;
    top:0;
    z-index:1000;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

.hero-inner { display:flex; gap:20px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.brand { display:flex; gap:16px; align-items:center; }
.brand img { height:68px; object-fit:contain; border-radius:10px; background:rgba(255,255,255,0.1); padding:6px; }
.brand-fallback{width:68px;height:68px;border-radius:10px;background:rgba(255,255,255,0.12);display:flex;align-items:center;justify-content:center;font-size:22px;}
.brand .title { font-size:20px; font-weight:700; letter-spacing:0.2px; }
.brand .subtitle { font-size:13px; opacity:0.95; margin-top:2px; }

.hero-actions { display:flex; gap:10px; align-items:center; }
.btn {
    min-height:44px;
    padding:11px 15px;
    border-radius:10px;
    border:none;
    cursor:pointer;
    font-weight:700;
    text-decoration:none;
    color:inherit;
}
.btn.install { background: rgba(255,255,255,0.95); color: var(--primary); }
.badge-open { background: rgba(255,255,255,0.15); padding:8px 12px; border-radius:20px; font-weight:700; display:inline-flex; gap:8px; align-items:center; }
.badge-open small{font-weight:600}

.search-wrap { padding:14px 0 18px; background:transparent; display:flex; justify-content:center; width:100%; }
.search { width:100%; max-width:760px; display:flex; gap:10px; }
.search-input-wrap{position:relative; flex:1;}
.search input {
    flex:1;
    width:100%;
    box-sizing:border-box;
    min-height:52px;
    padding:14px 18px;
    border-radius:30px;
    border:none;
    font-size:16px;
    box-shadow:0 10px 24px rgba(15,23,42,.16);
}
.search button {
    min-height:52px;
    padding:14px 20px;
    border-radius:30px;
    background:var(--secondary);
    color:#fff;
    border:none;
    font-weight:700;
    font-size:15px;
    cursor:pointer;
}

.categories { background:#fff; padding:12px 0; box-shadow:0 2px 6px rgba(0,0,0,0.04); border-bottom:1px solid rgba(15,23,42,.04); }
.category-list { display:flex; gap:10px; overflow-x:auto; padding:6px 6px; }
.category-item { white-space:nowrap; padding:10px 16px; border-radius:22px; background:#f5f7fa; color:var(--text); text-decoration:none; font-weight:600; display:inline-flex; gap:8px; align-items:center; transition:all .18s ease; }
.category-item:hover{transform:translateY(-1px)}
.category-item.active { background:var(--primary); color:#fff; box-shadow:0 6px 20px rgba(0,0,0,0.08); }

.products-grid { display:grid; grid-template-columns: 1fr 1fr; gap:16px; padding:24px 0 42px; }
.product-card {
    display:flex;
    gap:14px;
    background:#fff;
    padding:14px;
    border-radius:14px;
    align-items:center;
    box-shadow:0 10px 28px rgba(15,23,42,0.08);
    border:1px solid rgba(15,23,42,.06);
}
.product-card .thumb { width:120px; height:100px; flex:0 0 120px; border-radius:8px; overflow:hidden; background:#eee; }
.product-card .thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.clickable-thumb{cursor:pointer}
.product-meta { flex:1; }
.product-name { font-size:18px; font-weight:700; color:var(--secondary); margin-bottom:6px; }
.product-desc { font-size:14px; color:#667085; margin-bottom:8px; min-height:38px; }
.required-addons { font-size:12px; color:#444; margin-bottom:8px; }
.product-bottom { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.product-price { font-size:24px; font-weight:800; color:var(--primary); }
.product-actions { display:flex; gap:8px; align-items:center; }
.btn-compact { min-height:42px; padding:10px 12px; border-radius:10px; border:none; cursor:pointer; color:#fff; background:var(--primary); font-weight:800; }
.btn-view{background:#f5f7fa;color:var(--text);font-weight:700;border-radius:10px;padding:10px 12px;text-decoration:none;display:inline-flex;align-items:center;min-height:42px}
.is-disabled{opacity:0.6;cursor:not-allowed;box-shadow:none;}

.cart-btn { position:fixed; right:18px; bottom:18px; z-index:1200; background:var(--primary); color:#fff; padding:14px 16px; border-radius:50px; box-shadow:0 12px 30px rgba(0,0,0,0.22); display:flex; gap:10px; align-items:center; text-decoration:none; font-size:16px; }
.cart-count { background:#fff; color:var(--primary); border-radius:50%; width:28px; height:28px; display:flex; align-items:center; justify-content:center; font-weight:800; }

.modal { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:2000; align-items:center; justify-content:center; padding:20px; }
.modal.show { display:flex; }
.modal-content { background:#fff; border-radius:12px; padding:0; max-width:1100px; width:100%; max-height:calc(100vh - 40px); overflow:hidden; display:flex; flex-direction:column; box-shadow:0 12px 40px rgba(0,0,0,0.3); }
.modal-header { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 20px; border-bottom:1px solid rgba(0,0,0,0.06); background: var(--primary); color:#fff; }
.modal-body { padding:16px; overflow:auto; display:flex; gap:20px; background:#f8f9fa; }
.cart-items { flex:1; display:flex; flex-direction:column; gap:12px; }
.cart-item { display:flex; gap:12px; align-items:center; background:#fff; padding:10px; border-radius:8px; }
.cart-item img { width:72px; height:72px; object-fit:cover; border-radius:6px; }
.item-meta { flex:1; min-width:0; }
.item-name { font-weight:700; color: var(--secondary); margin-bottom:6px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.item-price { font-weight:800; color: var(--primary); margin-bottom:6px; }
.qty-input { width:70px; padding:8px; border-radius:8px; border:1px solid #ddd; min-height:38px; }
.remove-btn { background:#e74c3c; color:#fff; border:none; padding:8px 10px; border-radius:8px; cursor:pointer; }
.order-summary { width:320px; background:#fff; border-radius:8px; padding:16px; box-shadow:0 2px 10px rgba(0,0,0,0.04); flex-shrink:0; height:fit-content; }
.summary-row { display:flex; justify-content:space-between; margin-bottom:8px; color:#333; }
.summary-total { font-weight:900; font-size:18px; color: var(--primary); }
.summary-title{font-weight:800;margin-bottom:8px;}
.summary-divider{border:none;border-top:1px solid #eee;margin:12px 0;}
.summary-action-wrap{margin-top:12px;}
.cart-item-subtotal{font-weight:800;min-width:80px;text-align:right;}
.adicionais-list{font-size:12px;color:#555;margin-top:4px;}
.qty-row{display:flex;gap:8px;align-items:center;margin-top:8px;}
.empty-cart{ text-align:center;color:#667085;padding:22px; font-size:15px;}
.modal-footer { padding:16px; border-top:1px solid rgba(0,0,0,0.06); display:flex; gap:10px; justify-content:flex-end; background:#fff; }
.btn-secondary { background: var(--secondary); color:#fff; border:none; padding:10px 14px; border-radius:8px; cursor:pointer; font-weight:800; }
.modal-content-compact{max-width:560px; padding:0; overflow:hidden;}
.modal-simple-body{padding:16px; background:#fff;}
.modal-help{font-size:13px; color:#444; margin-bottom:10px;}
.modal-list{display:flex; flex-direction:column; gap:8px;}
.modal-error{display:none; margin-top:10px; color:#b02a37; font-size:13px;}
.modal-actions{display:flex; justify-content:flex-end; gap:8px; margin-top:14px;}
.modal-title{font-weight:800;}
.modal-subtitle{font-size:12px;opacity:0.95;}
.modal-header-group{display:flex;gap:12px;align-items:center;}
.header-icon{font-size:20px;}
.modal-top-actions{display:flex;gap:8px;align-items:center;}
.extra-option{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid #eee;border-radius:8px;padding:10px 12px;}
.extra-main{display:flex;align-items:center;gap:10px;}
.banner-section{padding:18px 0; background:transparent;}
#bannerContainer.container{max-width:1200px; margin:0 auto;}

.mid-carousel-section{
    width:100%;
    max-width:1200px;
    margin:12px auto 20px;
    padding:0 0 28px;
    position:relative;
}
.midCarouselSwiper{
    width:100%;
    max-width:none;
    border-radius:12px;
    overflow:hidden;
    background:transparent;
    box-shadow:none;
    padding-bottom:28px;
}
.midCarouselSwiper .swiper-wrapper{
    align-items:stretch;
}
.midCarouselSwiper .swiper-slide{
    width:300px;
    height:300px;
    flex-shrink:0;
    margin:0;
    background:#fff;
}
.mid-carousel-image{
    width:300px;
    height:300px;
    object-fit:cover;
    display:block;
    margin:0;
    background:#f8fafc;
    border-radius:0;
    user-select:none;
    -webkit-user-drag:none;
}
.midCarouselSwiper .swiper-button-prev,
.midCarouselSwiper .swiper-button-next{
    color:#fff;
    width:36px;
    height:36px;
    margin-top:0;
    top:50%;
    transform:translateY(-50%);
    background:rgba(15,23,42,.45);
    border-radius:50%;
    text-shadow:none;
}
.midCarouselSwiper .swiper-button-prev{left:8px;}
.midCarouselSwiper .swiper-button-next{right:8px;}
.midCarouselSwiper .swiper-button-prev:after,
.midCarouselSwiper .swiper-button-next:after{
    font-size:14px;
    font-weight:700;
}
.midCarouselSwiper .swiper-pagination{
    bottom:4px;
}
.midCarouselSwiper .swiper-pagination-bullet{
    background:#94a3b8;
    opacity:.7;
}
.midCarouselSwiper .swiper-pagination-bullet-active{
    background:var(--primary);
    opacity:1;
}

.banner-swiper{border-radius:12px; overflow:hidden; background:#fff; box-shadow:0 10px 26px rgba(15,23,42,.08)}
.banner-link{display:block;}
.banner-image{width:100%; height:320px; object-fit:cover; display:block;}
.video-unmute-btn.hidden{display:none;}
.empty-state{ text-align:center; padding: 70px 20px;}
.empty-state i{font-size: 80px; color: #ccc; margin-bottom: 20px;}
.empty-state h2{color:#667085; margin-bottom:10px;}
.empty-state p{color:#98a2b3;}
.empty-state .btn-empty{display:inline-block; margin-top:20px; padding:12px 24px;background: var(--primary); color:#fff; text-decoration:none; border-radius:10px; font-weight:700;}
.gallery-modal-content{max-width:1000px; display:flex; gap:20px; align-items:flex-start;}
.gallery-main-wrap{flex:1; text-align:center;}
.gallery-main-image{max-width:100%; max-height:70vh; border-radius:6px; object-fit:contain;}
.gallery-controls{margin-top:10px; display:flex; justify-content:center; gap:10px;}
.gallery-btn{padding:8px 12px; border-radius:8px; border:none; color:white; cursor:pointer;}
.gallery-btn-prev{background:var(--primary);}
.gallery-btn-next{background:var(--secondary);}
.gallery-sidebar{width:200px; max-height:70vh; overflow-y:auto;}
.gallery-thumbs{display:flex; flex-direction:column; gap:8px;}
.footer-main{background: var(--secondary);color: white;padding: 36px 0;margin-top: 20px;}
.footer-inner{max-width:1200px; margin:0 auto; padding:0 20px;}
.site-footer { display:grid; grid-template-columns: repeat(4,1fr); gap:24px; align-items:start; }
.footer-column h4 { margin-bottom:12px; font-size:16px; }
.footer-contact p, .footer-contact a { color: rgba(255,255,255,0.95); margin:6px 0; font-size:14px; text-decoration:none; display:block; }
.footer-pages a { color: rgba(255,255,255,0.9); display:block; margin:6px 0; text-decoration:none; }
.footer-company small { color: rgba(255,255,255,0.85); display:block; margin-top:6px; }
.payments { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:8px; }
.payments i { font-size:20px; background: rgba(255,255,255,0.06); padding:8px; border-radius:6px; }
.security-badges { display:flex; gap:8px; flex-direction:column; align-items:flex-end; }
.security-badges img { max-height:40px; object-fit:contain; border-radius:4px; background:#fff; padding:4px; }
.footer-link-inline{color:inherit;}
.footer-mt8{margin-top:8px;}
.footer-column-stack{display:flex; flex-direction:column; justify-content:space-between;}
.company-name{font-weight:700;}
.payment-fallback{opacity:0.9;}
.payment-tag{background:rgba(255,255,255,0.06);padding:6px 8px;border-radius:6px;}
.payment-tag .footer-link-inline{display:inline-flex;align-items:center;gap:6px;}
.payment-tag .footer-link-inline i{font-size:14px;}
.security-mt{margin-top:14px;}
.footer-copy{border-top:1px solid rgba(255,255,255,0.08);margin-top:18px;padding-top:14px;text-align:center;font-size:13px;color:rgba(255,255,255,0.85);}
.search-suggestions { position:absolute; left:0; right:0; top:calc(100% + 6px); background:#fff; border:1px solid #e6e6e6; border-radius:12px; max-height:320px; overflow:auto; z-index:1500; list-style:none; padding:6px; margin:4px 0 0 0; display:none; box-shadow:0 14px 30px rgba(15,23,42,.12);}
.search-suggestions li { padding:8px; display:flex; gap:8px; align-items:center; cursor:pointer; border-radius:8px; }
.search-suggestions li:hover, .search-suggestions li.active { background:#f5f7fb; }
.search-suggestions img { width:48px; height:48px; object-fit:cover; border-radius:8px; flex:0 0 48px; }
.search-suggestions .meta { flex:1; min-width:0; }
.search-suggestions .name { font-weight:700; color:var(--secondary); font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.search-suggestions .price { font-weight:800; color:var(--primary); font-size:13px; margin-top:4px; }
.local-hours{opacity:0.9}

.mySwiper .swiper-slide img { width:100%; height:320px; object-fit:cover; display:block; }
.mySwiper .swiper-slide .video-wrapper { width:100%; height:320px; display:flex; align-items:center; justify-content:center; position:relative; background:#000; }
.mySwiper .swiper-slide iframe { width:100%; height:320px; border:0; display:block; }
.video-unmute-btn {
    position: absolute;
    right: 12px;
    bottom: 12px;
    background: rgba(0,0,0,0.6);
    color: #fff;
    border: none;
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
    z-index: 20;
    font-weight:700;
}

@media (max-width:900px) {
    .site-footer { grid-template-columns: 1fr 1fr; }
    .security-badges { align-items:flex-start; margin-top:12px; }
    .products-grid { grid-template-columns: 1fr; }
    .brand .title { font-size:18px; }
    .brand img { height:56px; }
    .product-card { padding:10px; }
    .product-card .thumb { width:100px; height:84px; }
    .search{flex-direction:column}
    .search button{width:100%}
    .btn-view{padding:8px 10px;min-height:38px}
}
@media (max-width:800px) {
    .modal-body { flex-direction:column; }
    .order-summary { width:100%; }
    .cart-item img { width:56px; height:56px; }
    .qty-input { width:56px; }
    .modal-header { padding:12px; }
    .gallery-modal-content{flex-direction:column;}
    .gallery-sidebar{width:100%;max-height:none;}
    .gallery-thumbs{flex-direction:row;overflow-x:auto;}
    .gallery-thumbs img{height:80px;width:80px;object-fit:cover;flex:0 0 auto;}
    .banner-image, .mySwiper .swiper-slide img, .mySwiper .swiper-slide iframe, .mySwiper .swiper-slide .video-wrapper{height:220px;}
    .mySwiper .swiper-slide img { height:200px; }
    .midCarouselSwiper .swiper-slide,
    .mid-carousel-image{width:260px; height:260px;}
}
@media (max-width:600px) {
    .site-footer { grid-template-columns: 1fr; gap:18px; }
    .security-badges { flex-direction:row; gap:10px; }
}
@media (max-width:480px) {
    .mySwiper .swiper-slide img { height:140px; }
    .midCarouselSwiper .swiper-slide,
    .mid-carousel-image{width:220px; height:220px;}
    .midCarouselSwiper .swiper-button-prev,
    .midCarouselSwiper .swiper-button-next{width:30px; height:30px;}
    .midCarouselSwiper .swiper-button-prev:after,
    .midCarouselSwiper .swiper-button-next:after{font-size:12px;}
    .hero-inner{gap:12px}
    .brand-fallback{width:56px;height:56px;}
    .brand img{height:56px}
    .badge-open{font-size:12px}
    .product-price{font-size:20px}
    .cart-btn{right:12px;bottom:12px}
}

@media (prefers-reduced-motion: reduce){
    *, *::before, *::after{
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}