/* ==========================================================
   BRIQUECWB - Marketplace Premium
   ========================================================== */

:root{

    --brand-primary:#FF6B00;
    --brand-primary-dark:#E65F00;

    --brand-secondary:#0066CC;

    --brand-success:#22C55E;

    --brand-dark:#0F172A;

    --brand-text:#374151;

    --brand-white:#FFFFFF;

    --gray-50:#F8FAFC;
    --gray-100:#F1F5F9;
    --gray-200:#E2E8F0;
    --gray-300:#CBD5E1;
    --gray-400:#94A3B8;
    --gray-500:#64748B;
    --gray-600:#475569;

    --radius-sm:12px;
    --radius-md:18px;
    --radius-lg:24px;

    --shadow-sm:
        0 4px 12px rgba(15,23,42,.05);

    --shadow-md:
        0 12px 30px rgba(15,23,42,.08);

    --shadow-lg:
        0 24px 60px rgba(15,23,42,.12);

}

/* ==========================================================
   RESET
   ========================================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Inter',sans-serif;

    background:#F5F7FB;

    color:var(--brand-text);

    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;

}

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

a:hover{
    color:var(--brand-primary);
}

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

/* ==========================================================
   HEADER
   ========================================================== */

.site-header{

    position:sticky;
    top:0;
    z-index:999;

    background:rgba(255,255,255,.92);

    backdrop-filter:blur(16px);

    border-bottom:1px solid rgba(0,0,0,.05);

    box-shadow:
    0 10px 25px rgba(0,0,0,.03);

}

.brand-name{

    font-size:1.6rem;

    font-weight:800;

    letter-spacing:-1px;

    color:var(--brand-dark);

}

.brand-name span{
    color:var(--brand-primary);
}

.logo-icon{

    width:56px;
    height:56px;

    border-radius:16px;

    background:
    linear-gradient(
    135deg,
    rgba(255,107,0,.12),
    rgba(0,102,204,.10)
    );

    display:flex;
    align-items:center;
    justify-content:center;

}

/* ==========================================================
   SEARCH
   ========================================================== */

.search-form .form-control{

    min-width:280px;
    max-width:600px;

    border-radius:14px;

    border:1px solid var(--gray-200);

    height:52px;

    transition:.2s;

}

.search-form .form-control:focus{

    border-color:var(--brand-primary);

    box-shadow:
    0 0 0 4px rgba(255,107,0,.12);

}

/* ==========================================================
   HERO
   ========================================================== */

.hero{

    position:relative;

    overflow:hidden;

    padding:100px 0;

    background:

    radial-gradient(
        circle at top left,
        rgba(255,107,0,.14),
        transparent 40%
    ),

    radial-gradient(
        circle at bottom right,
        rgba(0,102,204,.12),
        transparent 40%
    ),

    #ffffff;

}

.hero .container{
    max-width:1140px;
}

.hero h1{

    font-size:4rem;

    font-weight:900;

    line-height:1.1;

    letter-spacing:-2px;

    color:var(--brand-dark);

    margin-bottom:20px;

}

.hero p{

    font-size:1.2rem;

    color:var(--gray-600);

    max-width:700px;

    margin-bottom:30px;

}

.hero form{

    display:flex;

    gap:12px;

    flex-wrap:wrap;

}

.hero input{

    min-width:280px;

}

/* ==========================================================
   CATALOGO
   ========================================================== */

.catalogo{
    padding:80px 0;
}

.catalogo h2{

    font-size:2rem;

    font-weight:800;

    margin-bottom:30px;

    color:var(--brand-dark);

}

.grid-produtos{

    display:grid;

    gap:24px;

    grid-template-columns:
    repeat(4,minmax(0,1fr));

}

/* ==========================================================
   CARD PRODUTO
   ========================================================== */

.card-produto{

    position:relative;

    background:#fff;

    border-radius:24px;

    overflow:hidden;

    box-shadow:var(--shadow-sm);

    transition:.25s ease;

}

.card-produto:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow-lg);

}

.card-produto img{

    width:100%;

    height:260px;

    object-fit:cover;

}

.badge-featured{

    position:absolute;

    top:15px;
    left:15px;

    background:var(--brand-primary);

    color:#fff;

    padding:8px 14px;

    border-radius:50px;

    font-size:.75rem;

    font-weight:700;

    box-shadow:
    0 10px 20px rgba(255,107,0,.25);

}

.card-body{
    padding:20px;
}

.card-body h3{

    font-size:1.05rem;

    font-weight:700;

    line-height:1.5;

    color:var(--brand-dark);

    min-height:50px;

    margin-bottom:10px;

}

.preco{

    font-size:2rem;

    font-weight:900;

    color:var(--brand-primary);

    margin-bottom:12px;

}

.product-info{

    display:flex;

    flex-wrap:wrap;

    gap:8px;

    margin-bottom:10px;

}

.product-info span{

    display:flex;

    align-items:center;

    gap:5px;

    font-size:.9rem;

    color:var(--gray-500);

}

.badge-status{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:8px 14px;

    border-radius:999px;

    background:
    rgba(0,102,204,.08);

    color:var(--brand-secondary);

    font-size:.8rem;

    font-weight:700;

}

/* ==========================================================
   PRODUCT PAGE
   ========================================================== */

.product-page{
    padding:80px 0;
}

.product-gallery{
    gap:24px;
}

.main-image{

    position:relative;

    overflow:hidden;

    border-radius:28px;

    height:500px;

    box-shadow:var(--shadow-md);

}

.main-image img{

    width:100%;
    height:100%;

    object-fit:cover;

    cursor:pointer;

    transition:.25s ease;

}

.main-image img:hover{
    transform:scale(1.03);
}

.thumbnails{

    display:grid;

    grid-template-columns:
    repeat(4,minmax(0,1fr));

    gap:12px;

}

.thumbnails img{

    width:100%;

    height:110px;

    object-fit:cover;

    border-radius:14px;

    cursor:pointer;

    border:3px solid transparent;

    transition:.2s;

}

.thumbnails img:hover{
    opacity:.85;
}

.thumbnails img.active{
    border-color:var(--brand-primary);
}

/* ==========================================================
   PRODUCT META
   ========================================================== */

.product-meta{

    background:#fff;

    border-radius:30px;

    padding:35px;

    box-shadow:var(--shadow-md);

}

.product-meta h1{

    font-size:2.3rem;

    font-weight:800;

    color:var(--brand-dark);

    margin-bottom:12px;

}

.product-price{

    font-size:3rem;

    font-weight:900;

    color:var(--brand-primary);

    margin-bottom:20px;

}

.product-meta p.description{

    color:var(--gray-600);

    line-height:1.9;

    margin-bottom:24px;

}

/* ==========================================================
   DETAILS LIST
   ========================================================== */

.list-details{

    list-style:none;

    padding:0;

    margin:0;

}

.list-details li{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:14px 0;

    border-bottom:1px solid var(--gray-200);

}

.list-details li strong{
    color:var(--brand-dark);
}

/* ==========================================================
   BUTTONS
   ========================================================== */

.btn-whatsapp{

    width:100%;

    height:60px;

    border:none;

    border-radius:16px;

    background:var(--brand-success);

    color:#fff;

    font-size:1.05rem;

    font-weight:700;

    display:flex;

    align-items:center;

    justify-content:center;

    transition:.2s;

}

.btn-whatsapp:hover{

    background:#16A34A;

    color:#fff;

}

.btn-map{

    width:100%;

    height:58px;

    border-radius:16px;

    border:2px solid var(--brand-secondary);

    color:var(--brand-secondary);

    background:#fff;

    font-weight:700;

    transition:.2s;

}

.btn-map:hover{

    background:var(--brand-secondary);

    color:#fff;

}

/* ==========================================================
   RELATED PRODUCTS
   ========================================================== */

.related-section{
    padding:60px 0;
}

.related-section h2{

    font-size:1.8rem;

    font-weight:800;

    margin-bottom:30px;

}

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

.site-footer{

    background:var(--brand-dark);

    color:#fff;

    margin-top:80px;

    padding:60px 0;

}

.footer-card{

    background:
    rgba(255,255,255,.04);

    border-radius:22px;

    padding:25px;

}

/* ==========================================================
   DRAG DROP
   ========================================================== */

.drag-drop-zone{

    border:2px dashed rgba(55,65,81,.25);

    border-radius:18px;

    padding:40px;

    text-align:center;

    background:#fff;

    transition:.2s;

    cursor:pointer;

}

.drag-drop-zone:hover{

    border-color:var(--brand-primary);

}

.drag-drop-zone.dragover{

    background:#EFF6FF;

    border-color:var(--brand-secondary);

}

/* ==========================================================
   ADMIN
   ========================================================== */

.admin-header{
    padding:20px 0;
}

.admin-nav a{

    margin-right:15px;

    font-weight:600;

}

.admin-card{

    background:#fff;

    border-radius:22px;

    padding:24px;

    box-shadow:var(--shadow-sm);

}

/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media(max-width:1200px){

    .grid-produtos{
        grid-template-columns:
        repeat(3,minmax(0,1fr));
    }

}

@media(max-width:900px){

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

    .hero{

        padding:70px 0;

    }

    .hero h1{

        font-size:3rem;

    }

}

@media(max-width:768px){

    .main-image{
        height:350px;
    }

    .thumbnails{
        grid-template-columns:
        repeat(3,minmax(0,1fr));
    }

}

@media(max-width:576px){

    .grid-produtos{
        grid-template-columns:1fr;
    }

    .hero{

        padding:50px 0;

    }

    .hero h1{

        font-size:2.2rem;

        letter-spacing:-1px;

    }

    .hero form{

        flex-direction:column;

    }

    .search-form .form-control{

        width:100%;

    }

    .main-image{

        height:280px;

    }

    .product-meta{

        padding:25px;

    }

    .product-price{

        font-size:2.2rem;

    }

}