/* Estilos Base - Preservados */
:root{
  --bg:#0b1220; --card:#0f172a; --fg:#e2e8f0; --muted:#94a3b8; --pri:#000; --br:#1f2937; --hl:#38bdf8;
  --gap:12px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
.wrap{max-width:1100px;margin:0 auto;padding:16px}
.header{display:flex;gap:8px;align-items:center;justify-content:space-between;margin-bottom:12px}
.h1{font-weight:700;font-size:20px}
.actions .btn{padding:8px 12px;border-radius:8px;border:1px solid var(--br);background:#0b1220;color:var(--fg);cursor:pointer}
.banner{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#0d1b2a;border:1px dashed #1e293b;padding:10px 12px;border-radius:8px;color:var(--muted);margin-bottom:12px}
.banner .btn{padding:6px 10px;border-radius:8px;border:1px solid var(--br);background:#0b1220;color:var(--fg);cursor:pointer}
.tabs{margin-bottom:10px}
.tabs a{display:inline-block;padding:2px 4px;border:1px solid var(--br);border-radius:999px;color:var(--fg);text-decoration:none;margin-right:6px}
.tabs a.active{background:var(--hl);border-color:var(--hl);color:#0b1220}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:var(--gap)}
.card{background:var(--card);border:1px solid var(--br);border-radius:12px;padding:12px}
.card img{width:100%;height:110px;object-fit:cover;border-radius:8px}
.card h3{margin:8px 0 4px;font-size:14px}
.price{color:var(--pri);font-weight:700}
.qctrl{display:flex;gap:8px;align-items:center;margin-top:8px}
.qctrl button{width:28px;height:28px;border-radius:8px;border:1px solid var(--br);background:#0b1220;color:var(--fg);cursor:pointer}
.list .row{display:grid;grid-template-columns:64px 1fr auto;gap:10px;margin-bottom:10px;background:var(--card);border:1px solid var(--br);border-radius:12px;padding:8px}
.list img{width:64px;height:64px;object-fit:cover;border-radius:8px}
.row h4{margin:0;font-size:14px}
.footerbar{position:sticky;bottom:0;left:0;right:0;background:rgba(2,6,23,.7);backdrop-filter:saturate(1.2) blur(6px);border-top:1px solid var(--br);padding:10px}
.footerbar .row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.kpis{color:var(--muted);font-size:14px}
.btn{padding:10px 14px;border-radius:10px;border:1px solid var(--br);background:#0b1220;color:var(--fg);cursor:pointer}
.btn.primary{background:var(--pri);border-color:var(--pri);color:#7dcdb0;font-weight:700}
.modal{position:fixed;inset:0;background:rgba(2,6,23,.64);display:none;align-items:center;justify-content:center;padding:16px}
.modal .box{max-width:720px;width:100%;background:var(--card);border:1px solid var(--br);border-radius:14px;padding:14px}
.modal .item{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center;border-bottom:1px dashed var(--br);padding:8px 0}
.actions{display:flex;gap:8px}
.actions .btn{background:#0b1220}


.small{font-size: 12px;
    color: #767676;
    background-color: #121d33;}

    

/* --- NOVO CSS para o SKIN Cilíndrico 3D --- */

/* Categorias (Com rolagem horizontal - swipe) */
.category-tabs-container {
    overflow-x: auto;
    white-space: nowrap;
    margin-top: 10px;
    margin-bottom: 20px;
    padding-bottom: 5px; 
    -webkit-overflow-scrolling: touch; 
    scrollbar-width: none; 
}
.category-tabs-container::-webkit-scrollbar { display: none; }
.category-track {
    display: flex;
    gap: 10px;
}
.category-link {
    display: inline-block;
    padding: 3px 4px;
    border-radius: 999px;
    border: 1px solid var(--br);
    color: var(--fg);
    text-decoration: none;
    transition: background-color 0.3s, border-color 0.3s;
    font-size: 14px;
}
.category-link.active-cat {
    background: var(--hl);
    border-color: var(--hl);
    color: var(--bg); 
    font-weight: 600;
}

#item-obs-input {
    width: 90%;
    resize: vertical;
    border-radius: 8px;
    background: #121d33;
    color: #ad9494;
}


/* 3D Carousel (Substitui o antigo .slider) */
.product-scene {
    width: 100%;
    height: 360px; 
    perspective: 1200px; 
    overflow: hidden;
    position: relative;
    margin-bottom: 20px;
}

.product-carousel {
    width: 100%;
    height: 100%;
    position: absolute;
    transform-style: preserve-3d;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Curva suave */
    display: flex;
    justify-content: center;
    align-items: center;
}

.carousel-item {
    position: absolute;
    width: 240px; 
    height: 300px; 
    background: var(--card);
    border: 2px solid var(--br);
    border-radius: 18px;
    opacity: 0.8;
    transform-origin: center center;
    transition: transform 0.5s ease, opacity 0.5s, box-shadow 0.5s, z-index 0.5s;
    cursor: grab;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    padding: 15px;
    text-align: center;
    backface-visibility: hidden;
}

.carousel-item img {
    width: 100%;
    max-height: 200px;
    object-fit: contain;
    border-radius: 10px;
}
.carousel-item .title {
    margin: 8px 0 2px;
    font-weight: 600;
}
.carousel-item .price {
    font-size: 16px;
}

/* Item Ativo (Fica na frente, sem transformação Y, com destaque) */
.carousel-item.active-item {
    opacity: 1;
    z-index: 10;
    border-color: var(--hl);
    box-shadow: 0 0 30px rgba(56, 189, 248, 0.8);
    cursor: default;
}

/* Detalhes do Item e Controle de Quantidade */
.item-details-area {
    text-align: center;
    padding: 10px 0;
    min-height: 180px; /* Para evitar pulos no layout */
}
.item-details-area h2 {
    margin: 0 0 5px;
    font-size: 24px;
    color: var(--fg);
}
.item-details-area .price-lg {
    font-size: 22px;
    font-weight: 700;
    color: #636060;
    margin-bottom: 10px;
}
.item-details-area p {
    color: var(--muted);
    min-height: 40px;
    margin: 0 auto 20px;
    max-width: 400px; 
}
.qctrl-full {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 20px;
}
.qctrl-full .qty-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    font-size: 24px;
    line-height: 1;
    border: 1px solid var(--br);
    background: var(--card);
    color: var(--fg);
    cursor: pointer;
    transition: background-color 0.3s;
    font-weight: bold;
}
.qctrl-full .qty-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
#item-qty-display {
    font-size: 28px;
    font-weight: 700;
    min-width: 40px;
    text-align: center;
}

    
/* ---------------------------------- */
/* CSS para o Bloco de Avaliação */
/* ---------------------------------- */
.google-review-box {
    /* Dimensões do Retângulo */
width: 100%;
    background-color: #000000;
    border: 1px solid #dadce0;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(60, 64, 67, 0.1);
    align-items: end;
    text-align: center;
    font-family: Arial, sans-serif;
}

/* Estilo do Texto de Chamada */
.review-text {
    font-size: xx-small;
    font-weight: 500;
    margin-bottom: 5px;
    color: #9298ad;
}

/* Estilo das Estrelas */
.stars {
    font-size: x-small;
    color: #fbbc04;
    line-height: 0.5;
    margin-top: 3px;
}

.review {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: end;
    text-align: center;
    top: 55px;
    left: 230px;
    padding: 1px;
}