* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

body {
    background-color: var(--bg-main);
    color: var(--text-primary);
    overflow-x: hidden;
    /* Removed fixed 100vh limit to allow scrolling */
}

body.home-page {
    background-color: #FFFFFF;
    color: #000000;
}

:root {
    --mouse-x: 50vw;
    --mouse-y: 50vh;
    --bg-main: #F5F5F5;          /* Cinza muito claro de fundo predominante */
    --bg-card: #FFFFFF;          /* Branco para cards e containers */
    --bg-alt: #F9F9F9;           /* Cinza claro para seções alternadas */
    --text-primary: #1A1A1A;     /* Preto principal para títulos e acentos */
    --text-secondary: #555555;   /* Cinza escuro para textos secundários e descrições */
    --accent: #C5A880;           /* Champagne Gold premium para acentos e badges */
    --accent-hover: #B3956D;     /* Dourado escuro para hover */
    --border-color: rgba(26, 26, 26, 0.1); /* Bordas discretas em tom escuro */
    --btn-primary-bg: #1A1A1A;
    --btn-primary-text: #FFFFFF;
    --btn-primary-hover: #333333;
}

/* Background Layer */
.bg-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    background: #FFFFFF;
    transition: opacity 0.3s ease;
}

.bg-layer::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at var(--mouse-x) var(--mouse-y), rgba(197, 168, 128, 0.15) 0%, rgba(245, 245, 245, 0) 60%);
    opacity: 1;
    filter: blur(80px);
    transition: background 0.1s ease;
}

/* Scroll Track & Sticky logic */
.scroll-sequence {
    height: 180vh; /* Controla a duração total do scroll na página */
    position: relative;
    width: 100%;
}

.sticky-container {
    position: sticky;
    top: 0;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #FFFFFF; /* Garante o fundo inicial branco */
}

.bg-transition {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000000; /* Fundo alvo preto em vez de branco */
    opacity: 0; /* Inicia invisível */
    z-index: 0;
}

/* Navbar Styles */
.navbar-container, .navbar-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    padding-top: 25px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    transition: transform 0.3s ease;
}

.navbar {
    background-color: rgba(0, 0, 0, 0.8) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    width: 90%;
    max-width: 1100px;
    border-radius: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px 8px 30px;
    transition: background-color 0.4s ease, border 0.4s ease;
}

.logo img {
    height: 35px;
    width: auto;
    display: block;
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 25px;
}

.nav-links li a {
    text-decoration: none;
    color: #FFFFFF !important;
    font-size: 16px;
    font-weight: 300 !important;
    transition: opacity 0.3s ease;
}

.nav-links li a:hover {
    opacity: 0.8;
}

.nav-icons-container {
    display: flex;
    align-items: center;
}

.nav-icons {
    background-color: #FFFFFF !important;
    border-radius: 50px;
    padding: 10px 25px;
    display: flex;
    gap: 20px;
    align-items: center;
    color: #000000 !important;
}

.nav-icons a {
    font-size: 18px;
    transition: transform 0.2s ease;
    color: #000000 !important;
}

.nav-icons a:hover {
    transform: scale(1.1);
}

/* Hero Section Styles */
.hero-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-top: 140px; /* Aumentado para não colidir com a Navbar fixada */
    padding: 0 20px;
    background-color: transparent;
    justify-content: flex-start;
    min-height: auto;
    position: relative;
    z-index: 10;
}

.sub-head {
    background-color: #000000;
    color: #FFFFFF;
    border-radius: 50px;
    padding: 8px 24px;
    font-size: 14px;
    font-weight: 400;
    margin-bottom: 20px;
}

.hero-section h1 {
    font-size: 42px;
    font-weight: 500;
    margin-bottom: 12px;
    letter-spacing: -0.5px;
    color: #000;
    font-family: inherit;
    line-height: 1.2;
}

.hero-section p {
    font-size: 17px;
    font-weight: 400;
    line-height: 1.4;
    max-width: 400px;
    color: #000;
    font-family: inherit;
    margin-left: auto;
    margin-right: auto;
}

/* Macbook Mockup Styles */
.mockup-container {
    position: relative;
    width: 80%;
    max-width: 650px;
    margin: -10px auto 40px auto;
    display: flex;
    justify-content: center;
}

.macbook-img {
    width: 100%;
    height: auto;
    position: relative;
    z-index: 3; /* Macbook frame por cima para o iPhone parecer estar "dentro" */
    pointer-events: none;
    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.inner-screen {
    position: absolute;
    top: 4.5%;       
    left: 11.5%;     
    width: 77%;      
    height: 84%;     
    z-index: 1;      /* Fundo da tela do macbook */
    background-color: #000000;
    border-radius: 8px; 
    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.iphone-img {
    position: absolute;
    top: 15%; /* Centralizado verticalmente dentro do Macbook */
    left: 50%;
    transform: translateX(-50%);
    height: 65%; /* Tamanho para caber bem na tela inicial */
    z-index: 2; /* Fica entre a tela preta e o frame do macbook */
    object-fit: contain;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Animação e Sessão 2 Styles */
.section-2-content {
    position: absolute;
    top: 50%;
    left: 55%; /* Empurra o texto mais para a direita */
    /* `right` fecha a caixa contra a borda: antes era left+translateX(50px)
       com largura fixa, e entre 901px e ~1130px o bloco saía da tela pela
       direita. Com os dois lados presos, a largura cede sozinha. */
    right: 4%;
    transform: translateY(-50%);
    opacity: 0;
    z-index: 20;
    color: #FFF;
    max-width: 540px;
    /* Centralizado no eixo vertical, texto longo cresce para os dois lados.
       Sem este teto ele escapa por cima e por baixo. */
    max-height: 78vh;
    overflow-y: auto;
    text-align: left;
    pointer-events: none; /* Previne bloqueio de clique antes de aparecer */
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.section-2-content.active {
    pointer-events: auto;
}

.section-2-content h2 {
    font-size: 38px;
    font-weight: 600;
    margin-bottom: 10px;
    line-height: 1.15;
    letter-spacing: -0.5px;
}

/* Chamada logo abaixo do nome do produto: branca e maior que o corpo,
   para não competir com o h2 nem sumir junto com os parágrafos. */
.section-2-content p.lead {
    font-size: 19px;
    line-height: 1.35;
    color: #FFF;
    margin-bottom: 18px;
}

.section-2-content p {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    /* Antes eram 30px por parágrafo. Com o texto de 3 parágrafos isso
       sozinho empurrava o botão para fora da tela. */
    margin-bottom: 12px;
    color: #A1A1A6; /* Cinzento clássico Apple como na referência */
}

.section-2-content p:last-of-type {
    margin-bottom: 26px;
}

.btn-buy {
    background-color: #FFF;
    color: #000;
    border: none;
    padding: 15px 35px;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.btn-buy:hover {
    transform: scale(1.05);
    background-color: #F0F0F0;
}

/* Responsividade */
@media (max-width: 900px) {
    .home-page .nav-links {
        display: none;
    }
    .home-page #mobile-menu {
        display: block !important;
    }
    .home-page .navbar {
        padding: 10px 20px;
    }
    .home-page .hero-section h1 {
        font-size: 32px;
    }
    .home-page .section-2-content {
        right: auto;
        left: 50%;
        transform: translate(-50%, -50%) !important;
        text-align: center;
        width: 90%;
        max-width: none;
        top: 58%;
        max-height: 72vh;
    }
    .home-page .section-2-content h2 {
        font-size: 30px;
    }
    .home-page .section-2-content p.lead {
        font-size: 17px;
    }
}

/* Session 3 */
.session-3 {
    background: var(--bg-main);
    color: var(--text-primary);
    padding: 100px 5%;
    display: flex;
    flex-direction: column;
    gap: 30px;
    position: relative;
    z-index: 30;
}

.products-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.products-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.product-card {
    background: var(--bg-card);
    border-radius: 23.08px;
    padding: 30px;
    min-height: 550px; height: auto;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: background 0.4s ease;
    display: flex;
    flex-direction: column;
}

.product-card h3 {
    font-size: 28px;
    font-weight: 500;
    z-index: 2;
    transition: opacity 0.3s ease;
}

.img-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.img-wrapper img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: transform 0.5s ease;
}

/* Removed hover effect loops */

@keyframes floatItem {
    0% { transform: translateY(0px) rotate(0deg); }
    100% { transform: translateY(-15px) rotate(2deg); }
}

/* Specific image placement tweaks for specific cards could be added here if needed */

@media (max-width: 1024px) {
    .products-grid-3, .products-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .products-grid-3, .products-grid-4 {
        grid-template-columns: 1fr;
    }
}

/* Session 4 */
.session-4 {
    position: relative;
    width: 100%;
    min-height: 55vh;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 40px;
    padding: 0 8%;
    overflow: hidden;
    background-color: var(--bg-main);
    z-index: 10;
}

.session-4::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at var(--mouse-x) var(--mouse-y), rgba(197, 168, 128, 0.15) 0%, rgba(245, 245, 245, 0) 60%);
    opacity: 1;
    filter: blur(80px);
    transition: background 0.1s ease;
    z-index: 1;
    pointer-events: none;
}

.s4-col {
    position: relative;
    z-index: 2;
    flex: 1;
    display: flex;
}

.s4-col-left {
    align-items: center;
    justify-content: flex-start;
}

.s4-col-left h2 {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 80px;
    font-weight: 700;
    color: var(--text-primary);
}

.s4-col-center {
    align-items: center; /* Center horizontally and vertically */
    justify-content: center;
}

.s4-col-center img {
    height: 80vh; /* Make image slightly bigger */
    max-height: none; 
    transform: translateY(22vh); /* Push down further to crop bottom */
    display: block;
}

.s4-col-right {
    align-items: center;
    justify-content: flex-end;
}

.s4-col-right img {
    width: 300px;
    height: auto;
    /* Logo é branca; escurece para dar contraste sobre o fundo claro */
    filter: brightness(0.125);
}

@media (max-width: 1024px) {
    .session-4 {
        flex-direction: column;
        align-items: center;
        padding-top: 50px;
    }
    .s4-col-left h2 {
        font-size: 50px;
        margin-bottom: 20px;
    }
    .s4-col-right img {
        margin-top: 20px;
    }
}

/* Session 5 */
.session-5 {
    background-color: #FFFFFF;
    padding: 100px 8%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.s5-title {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 50px;
    font-weight: 700;
    color: black;
    margin-bottom: 60px;
    text-align: center;
}

.s5-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
}

.s5-card {
    height: 560px; /* Adjusted for IG iframe height */
    width: 100%;
    max-width: 326px; /* Instagram typical width */
    margin: 0 auto;
    border-radius: 12px;
    overflow: hidden;
    background-color: transparent;
}

.s5-card iframe {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 12px;
}

@media (max-width: 768px) {
    .s5-grid {
        grid-template-columns: 1fr;
    }
}

/* Session 6 */
.session-6 {
    background-color: #FFFFFF;
    padding: 100px 8%;
    color: black;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    position: relative;
    overflow: hidden;
}

.s6-top-left {
    max-width: 700px;
    margin-bottom: 80px;
}

.s6-main-title {
    font-size: 80px;
    font-weight: 300;
    letter-spacing: -2px;
    margin-bottom: 20px;
}

.s6-main-desc {
    font-size: 20px;
    font-weight: 300;
    color: #555;
    line-height: 1.4;
}

.s6-bottom-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-top: 50px;
}

.s6-product-info {
    flex: 1;
    max-width: 500px;
    padding-left: 5%;
}

.s6-subtitle {
    display: block;
    color: var(--accent);
    font-size: 20px;
    font-weight: 400;
    margin-bottom: 10px;
}

.s6-product-title {
    font-size: 45px;
    font-weight: 700;
    margin-bottom: 20px;
}

.s6-product-desc {
    font-size: 16px;
    line-height: 1.5;
    color: #444;
    margin-bottom: 5px;
}

.s6-btn {
    justify-content: flex-start;
}

.s6-product-image {
    flex: 1;
    display: flex;
    justify-content: flex-end;
}

.s6-product-image img {
    max-width: 100%;
    height: auto;
    max-height: 750px;
    object-fit: contain;
}

@media (max-width: 1024px) {
    .s6-bottom-content {
        flex-direction: column-reverse;
        gap: 50px;
    }
    .s6-product-info {
        padding-left: 0;
        text-align: center;
        max-width: 100%;
    }
    .s6-btn {
        justify-content: center;
    }
    .s6-product-image {
        justify-content: center;
    }
    .s6-main-title {
        font-size: 50px;
    }
}

/* Animation Classes */
.fade-in {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Footer Styles */
.site-footer {
    background-color: var(--bg-alt);
    color: var(--text-secondary);
    padding: 80px 8% 20px;
    border-top: 1px solid var(--border-color);
}

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

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 40px;
    margin-bottom: 60px;
}

.footer-col h4 {
    font-size: 18px;
    margin-bottom: 25px;
    color: var(--text-primary);
    font-weight: 600;
}

.footer-col ul {
    list-style: none;
    padding: 0;
}

.footer-col ul li {
    margin-bottom: 15px;
}

.footer-col ul li a {
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.3s;
}

.footer-col ul li a:hover {
    color: var(--text-primary);
}

.brand-col .footer-logo {
    width: 150px;
    margin-bottom: 20px;
    filter: brightness(0.125); /* Makes logo dark */
}

.brand-col p {
    color: var(--text-secondary);
    line-height: 1.6;
    font-size: 14px;
}

.social-icons {
    display: flex;
    gap: 15px;
}

.social-icons a {
    color: var(--text-secondary);
    font-size: 20px;
    transition: color 0.3s;
}

.social-icons a:hover {
    color: var(--text-primary);
}

.footer-bottom {
    border-top: 1px solid var(--border-color);
    padding-top: 20px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 14px;
}

/* Global Mobile Responsiveness Updates */
@media (max-width: 768px) {
    /* Navbar */
    .nav-links {
        display: none;
    }
    
    .navbar {
        padding: 15px 20px;
    }
    
    /* Hero Section */
    .hero-title {
        font-size: 40px;
        margin-top: 40px;
    }
    
    /* Session 2 Content */
    .session-2-content h2 {
        font-size: 30px;
        text-align: center;
        padding: 0 20px;
    }
    
    /* Session 3 */
    .session-3 {
        padding: 50px 20px;
    }
    
    /* Session 4 */
    .s4-col-left h2 {
        font-size: 45px;
    }
    
    .s4-col-center img {
        height: 55vh;
        transform: translateY(10vh);
    }
    
    /* Session 5 */
    .session-5 {
        padding: 60px 20px;
    }
    
    .s5-title {
        font-size: 36px;
    }
    
    /* Session 6 */
    .session-6 {
        padding: 60px 20px;
    }
    
    .s6-main-title {
        font-size: 45px;
    }
    
    .s6-product-title {
        font-size: 35px;
    }
    
    /* Footer */
    .footer-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .brand-col .footer-logo {
        margin: 0 auto 20px;
    }
    
    .social-icons {
        justify-content: center;
    }
}

/* ========================================= */
/* PRODUCT COLLECTION PAGE STYLES            */
/* ========================================= */

/* Hero Banner */
.col-hero {
    position: relative;
    width: 100%;
    height: 80vh;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 10%;
    margin-top: 0;
    padding-top: 0;
    overflow: hidden;
}

.navbar-absolute {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    margin-top: 20px;
}

.col-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.col-hero-content {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 500px;
}

.col-subtitle {
    color: #80C827;
    font-size: 25px;
    font-weight: 400;
    margin-bottom: 5px;
}

.col-title {
    color: white;
    font-size: 45.73px;
    font-weight: 500;
    margin-bottom: 20px;
}

.col-desc {
    color: white;
    font-size: 20px;
    font-weight: 300;
    line-height: 1.4;
    margin-bottom: 5px;
    max-width: 457px;
}

.col-btn-container {
    width: 253px;
    height: 60px;
    margin-top: 32px;
    background: linear-gradient(180deg, #99F924 0%, #D6FFA3 100%);
    border-radius: 50px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.col-btn-container .col-btn {
    color: black;
    font-size: 22.36px;
    font-weight: 300;
    text-decoration: none;
}

/* Carousel Section */
.col-carousel-section {
    display: flex;
    background-color: #FFFFFF;
    padding: 60px 0 60px 5%;
    gap: 20px;
    border-top: 1px solid #ddd;
}

.col-sidebar {
    width: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-right: 20px;
}

.col-sidebar-subtitle {
    font-size: 16px;
    color: #555;
    margin-bottom: 5px;
}

.col-sidebar-title {
    font-size: 50px;
    font-weight: bold;
    color: #000;
    margin-bottom: 0px;
}

.carousel-nav {
    display: flex;
    gap: 15px;
}

.nav-arrow {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #000;
    transition: transform 0.2s;
}

.nav-arrow:hover {
    transform: scale(1.2);
}

.col-carousel-container {
    flex: 1;
    overflow-x: auto;
    position: relative;
    padding-bottom: 20px;
    cursor: grab;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

.col-carousel-container.active {
    cursor: grabbing;
}

.col-carousel-container::-webkit-scrollbar {
    display: none;
}

.col-carousel-track {
    display: flex;
    gap: 20px;
}

.product-col-card {
    min-width: 320px;
    border-radius: 15px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-decoration: none;
    transition: transform 0.2s;
}

.product-col-card:hover {
    transform: scale(1.02);
}

.product-col-card.theme-dark {
    background-color: #000000;
    color: #FFFFFF;
}

.product-col-card.theme-light {
    background-color: #DDDDD8;
    color: #000000;
}

.card-title {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 10px;
    text-align: center;
}

.card-desc {
    font-size: 12px;
    line-height: 1.4;
    margin-bottom: 20px;
    opacity: 0.8;
    text-align: center;
}

.card-img {
    width: 100%;
    height: 300px;
    object-fit: contain;
    margin-bottom: 20px;
    mix-blend-mode: multiply;
    background-color: transparent;
}

.card-price {
    font-size: 16px;
    text-align: center;
}

/* CMS Banner Placeholder */
.cms-banner-placeholder {
    width: 100%;
    height: 300px;
    background-color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}

.cms-banner-content h2 {
    color: #333333;
    font-size: 30px;
    font-weight: 300;
    letter-spacing: 2px;
}

/* Responsive Updates for Colecao */
@media (max-width: 1024px) {
    .col-carousel-section {
        flex-direction: column;
        padding-left: 20px;
        padding-right: 20px;
    }
    .col-sidebar {
        width: 100%;
        align-items: center;
        margin-bottom: 30px;
    }
    .col-carousel-container {
        overflow-x: auto;
    }
    .col-hero {
        padding: 40px 20px;
        height: auto;
        min-height: 60vh;
    }
}

/* ========================================= */
/* PRODUCT DETAILS PAGE STYLES               */
/* ========================================= */

.product-details-section {
    padding: 40px 10%;
    max-width: 1400px;
    margin: 0 auto;
}

.details-container {
    display: flex;
    gap: 60px;
    align-items: flex-start;
}

/* Left Column - Image Grid */
.details-left {
    flex: 1;
}

.image-grid-2x2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.img-preview-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    aspect-ratio: 1;
    overflow: hidden;
    cursor: zoom-in;
    display: flex;
    align-items: center;
    justify-content: center;
}

.img-preview-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.img-preview-card:hover img {
    transform: scale(1.05);
}

/* Right Column - Info */
.details-right {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.details-title {
    font-size: 28px;
    font-weight: bold;
    color: var(--text-primary);
    margin-bottom: 15px;
}

.details-desc {
    font-size: 16px;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 5px;
    max-width: 90%;
}

.options-container {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* Models */
.model-selection {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.model-card {
    border: 1px solid var(--border-color);
    border-radius: 15px;
    padding: 20px;
    cursor: pointer;
    position: relative;
    background-color: var(--bg-card);
    color: var(--text-primary);
    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.model-card:hover {
    background-color: rgba(119, 119, 120, 0.06);
}

.model-card.selected {
    background-color: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    border-color: var(--btn-primary-bg);
}

.model-card h3 {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 5px;
}

.model-card p {
    font-size: 14px;
    opacity: 0.8;
}

.model-icon {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 18px;
    color: var(--text-secondary);
}

.model-card.selected .model-icon {
    color: var(--btn-primary-text);
}

/* Colors */
.color-title {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 15px;
    color: var(--text-primary);
}

.color-swatches {
    display: flex;
    gap: 15px;
}

.color-swatch {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    /* Contorno: sem ele, Branco e Prateado somem no card branco. Era um
       box-shadow inset, mas com a regra global de "nada de sombra" ele seria
       apagado junto — então virou borda de verdade, que faz o mesmo papel. */
    border: 1px solid rgba(0, 0, 0, 0.18);
    background-clip: padding-box;
    transition: transform 0.2s;
}

.color-name {
    font-weight: 400;
    color: var(--text-secondary);
}

.color-swatch:hover {
    transform: scale(1.1);
}

.color-swatch:active {
    transform: scale(0.95);
}

.color-swatch.selected {
    border: 3px solid var(--text-primary);
    transform: scale(1.1);
}

/* Button */
.details-buy-btn {
    width: 253px;
    height: 52px;
    background: var(--btn-primary-bg);
    border-radius: 50px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    color: var(--btn-primary-text);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    margin-top: 10px;
    transition: transform 0.2s, background-color 0.2s;
}

.details-buy-btn:hover {
    background-color: var(--btn-primary-hover);
    transform: scale(1.02);
}

.details-buy-btn:active {
    transform: scale(0.98);
}

/* Lightbox Modal */
.lightbox-modal {
    display: none;
    position: fixed;
    z-index: 1000;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.9);
}

.lightbox-content {
    margin: auto;
    display: block;
    max-width: 80%;
    max-height: 80%;
}

.lightbox-close {
    position: absolute;
    top: 30px;
    right: 40px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
}

/* Responsive */
@media (max-width: 768px) {
    .details-container {
        flex-direction: column;
    }
    .image-grid-2x2 {
        grid-template-columns: 1fr;
    }
}

/* ========================================= */
/* REVIEWS SECTION                           */
/* ========================================= */

.reviews-section {
    padding: 60px 10%;
    max-width: 1400px;
    margin: 0 auto;
}

.reviews-container {
    display: flex;
    gap: 60px;
    align-items: flex-start;
}

/* Reviews Left Column */
.reviews-left {
    flex: 1;
    max-width: 400px;
}

.reviews-title {
    font-size: 24px;
    font-weight: bold;
    color: #000;
    margin-bottom: 20px;
}

.reviews-score {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 10px;
}

.score-number {
    font-size: 80px;
    font-weight: bold;
    color: #000;
    line-height: 1;
}

.score-star {
    font-size: 60px;
    color: #000;
}

.reviews-count {
    font-size: 20px;
    color: #333;
}

.reviews-count strong {
    font-weight: bold;
    color: #000;
}

/* Reviews Right Column (Grid/Layout) */
.reviews-right {
    flex: 2;
    overflow: hidden;
}

.reviews-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    align-items: center;
}

/* Dummy Cards */
.review-dummy-card {
    background-color: #3B3B3B;
    border-radius: 10px;
    aspect-ratio: 3/4;
    width: 100%;
}

/* Active Card */
.review-active-card {
    grid-column: span 4;
    background-color: transparent;
    padding: 20px 0;
}

.review-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}

.review-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #7A7A7A;
    color: #FFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 18px;
}

.review-name {
    font-size: 18px;
    font-weight: bold;
    color: #000;
}

.review-message {
    font-size: 14px;
    color: #333;
    line-height: 1.5;
    margin-bottom: 10px;
    max-width: 90%;
}

.review-timestamp {
    font-size: 12px;
    color: #888;
}

@media (max-width: 768px) {
    .reviews-container {
        flex-direction: column;
    }
    .reviews-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .review-active-card {
        grid-column: span 2;
    }
}

/* ========================================= */
/* LOGIN PAGE                                */
/* ========================================= */

.login-page {
    margin: 0;
    padding: 0;
    height: 100vh;
    overflow: hidden;
    color: #fff;
    background-color: #000;
}

.login-page .navbar-wrapper {
    position: relative;
    z-index: 10;
}

.login-main {
    position: relative;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    height: calc(100vh - 80px); /* Adjust based on navbar height */
}

.login-container {
    background-color: rgba(26, 26, 26, 0.55); /* Monochromatic glassmorphism with 55% opacity */
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    width: 100%;
    max-width: 450px;
    padding: 50px 40px;
    border-radius: 20px;
    box-shadow: 0 25px 50px rgba(0,0,0,0.3);
}

.login-title {
    font-size: 36px;
    font-weight: 500;
    margin-bottom: 5px;
    color: #fff;
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.input-group {
    position: relative;
    width: 100%;
}

.input-group input {
    width: 100%;
    padding: 10px 0;
    font-size: 18px;
    color: #fff;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    outline: none;
    transition: border-color 0.3s;
}

.input-group input:focus {
    border-bottom: 1px solid #fff;
}

.input-group label {
    position: absolute;
    top: 10px;
    left: 0;
    font-size: 18px;
    color: rgba(255, 255, 255, 0.7);
    pointer-events: none;
    transition: 0.3s ease all;
}

.input-group input:focus ~ label,
.input-group input:not(:placeholder-shown) ~ label {
    top: -20px;
    font-size: 14px;
    color: #fff;
}

.login-btn {
    background-color: #fff;
    color: #000;
    font-size: 18px;
    font-weight: 500;
    padding: 15px;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    margin-top: 10px;
    transition: transform 0.2s, filter 0.2s;
}

.login-btn:hover {
    transform: scale(1.02);
    filter: brightness(0.9);
}

.login-btn:active {
    transform: scale(0.98);
}

.login-links {
    margin-top: 5px;
}

.login-links a {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: underline;
    font-size: 14px;
    transition: color 0.2s;
}

.login-links a:hover {
    color: #fff;
}

/* ========================================= */
/* CLIENTES DASHBOARD                        */
/* ========================================= */

.clientes-page {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    color: #fff;
    background-color: #000;
}

.clientes-main {
    position: relative;
    z-index: 10;
    padding: 100px 10%;
    min-height: calc(100vh - 80px);
    display: flex;
    align-items: flex-end; /* Align items to bottom like in reference */
}

.dashboard-bottom {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    width: 100%;
    margin-bottom: 50px;
}

/* Left Actions (Circles) */
.dashboard-actions {
    display: flex;
    gap: 40px;
}

.action-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    cursor: pointer;
    text-align: center;
}

.action-item span {
    font-size: 16px;
    color: #fff;
    font-weight: 500;
    max-width: 90px; /* Forces wrap for 'Comprar mais' to keep it centered properly under the 90px circle */
    line-height: 1.2;
}

.action-circle {
    width: 90px;
    height: 90px;
    background-color: #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 32px;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.action-item:hover .action-circle {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.2);
}

.action-item:active .action-circle {
    transform: translateY(2px);
}

/* Right Cards Slider */
.dashboard-cards {
    display: flex;
    gap: 30px;
    justify-content: flex-end;
}

.dashboard-card {
    width: 210px;
    min-width: 0; /* Overrides .product-col-card min-width */
    padding: 20px; /* Overrides .product-col-card padding */
    opacity: 0; /* starts invisible for fade in */
    transform: translateY(20px);
    filter: blur(10px);
    transition: opacity 0.5s ease, transform 0.5s ease, filter 0.5s ease;
}

.dashboard-card .card-title {
    font-size: 18px; /* scale down text */
}

.dashboard-card .card-desc {
    font-size: 12px;
}

.dashboard-card.blur-in {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

.dashboard-card.blur-out {
    opacity: 0;
    transform: translateY(-20px);
    filter: blur(10px);
}

@media (max-width: 1024px) {
    .dashboard-bottom {
        flex-direction: column;
        align-items: center;
        gap: 60px;
    }
}

/* ========================================= */
/* GLASS SUBPAGES (Carrinho, Suporte, Config)*/
/* ========================================= */

.glass-page-main {
    position: relative;
    z-index: 10;
    min-height: calc(100vh - 80px);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px 10%;
    color: #fff;
}

.glass-container {
    background-color: rgba(26, 26, 26, 0.55);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 25px 50px rgba(0,0,0,0.3);
    width: 100%;
}

.glass-container.medium-container { max-width: 600px; }
.glass-container.large-container { max-width: 800px; }

.glass-title {
    font-size: 32px;
    font-weight: 500;
    margin-bottom: 30px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 15px;
}

/* Buttons inside Glass */
.glass-btn {
    padding: 15px 30px;
    border: none;
    border-radius: 30px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.2s, opacity 0.2s;
}

.glass-btn.primary {
    background-color: #fff;
    color: #000;
    width: 100%;
}

.glass-btn:hover { transform: scale(1.02); opacity: 0.9; }

/* Carrinho */
.cart-items { margin-bottom: 30px; }
.cart-item {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px 0;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
.cart-item img {
    width: 80px;
    height: auto;
    border-radius: 10px;
}
.cart-item-details { flex: 1; }
.cart-item-details h3 { font-size: 18px; margin-bottom: 5px; }
.cart-item-details p { font-size: 14px; color: rgba(255,255,255,0.6); }
.cart-item-qty {
    display: flex;
    align-items: center;
    gap: 15px;
    background: rgba(255,255,255,0.1);
    padding: 5px 15px;
    border-radius: 20px;
}
.cart-item-qty button {
    background: none; border: none; color: #fff; font-size: 18px; cursor: pointer;
}
.cart-item-price { font-weight: bold; font-size: 18px; margin-left: 20px; }
.cart-item-remove {
    background: none; border: none; color: #ff4d4d; font-size: 18px; cursor: pointer; margin-left: 20px;
}

.cart-summary {
    background: rgba(0,0,0,0.2);
    padding: 20px;
    border-radius: 15px;
}
.summary-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 16px;
    color: rgba(255,255,255,0.8);
}
.summary-row.total {
    font-size: 20px;
    font-weight: bold;
    color: #fff;
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 15px;
    margin-top: 10px;
    margin-bottom: 20px;
}

/* Suporte */
.support-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}
.support-card {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 15px;
    padding: 30px 20px;
    text-align: center;
    color: #fff;
    text-decoration: none;
    transition: background 0.3s, transform 0.2s;
}
.support-card i { font-size: 40px; margin-bottom: 15px; }
.support-card h3 { font-size: 20px; margin-bottom: 10px; }
.support-card p { font-size: 14px; color: rgba(255,255,255,0.6); }
.support-card:hover {
    background: rgba(255,255,255,0.1);
    transform: translateY(-5px);
}

/* Configurações */
.settings-section { margin-bottom: 5px; }
.settings-section h3 {
    font-size: 20px;
    margin-bottom: 20px;
    color: rgba(255,255,255,0.8);
}
.toggle-group {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    font-size: 16px;
}
.switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
}
.switch input { opacity: 0; width: 0; height: 0; }
.slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(255,255,255,0.2);
    transition: .4s;
}
.slider:before {
    position: absolute;
    content: "";
    height: 16px; width: 16px;
    left: 4px; bottom: 4px;
    background-color: white;
    transition: .4s;
}
input:checked + .slider { background-color: #CEE7E6; }
input:checked + .slider:before { transform: translateX(26px); background-color: #000; }
.slider.round { border-radius: 34px; }
.slider.round:before { border-radius: 50%; }

.links-section a {
    display: flex;
    align-items: center;
    gap: 15px;
    color: #fff;
    text-decoration: none;
    padding: 15px;
    background: rgba(255,255,255,0.05);
    border-radius: 10px;
    margin-bottom: 10px;
    transition: background 0.2s;
}
.links-section a:hover { background: rgba(255,255,255,0.1); }

/* ========================================= */
/* SEARCH MODAL (GLOBAL)                     */
/* ========================================= */

.search-modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 15vh;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.search-modal-overlay.active {
    opacity: 1;
    pointer-events: all;
}

.search-modal-content {
    background: rgba(15, 25, 35, 0.8);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 20px;
    width: 90%;
    max-width: 600px;
    padding: 30px;
    position: relative;
    transform: translateY(-20px);
    transition: transform 0.3s ease;
    box-shadow: 0 30px 60px rgba(0,0,0,0.5);
}

.search-modal-overlay.active .search-modal-content {
    transform: translateY(0);
}

.close-search {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    color: #fff;
    font-size: 24px;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.2s;
}

.close-search:hover { opacity: 1; }

.search-input-group {
    display: flex;
    align-items: center;
    border-bottom: 2px solid #fff;
    padding-bottom: 10px;
    margin-bottom: 20px;
    margin-top: 10px;
}

.search-icon-left {
    color: #fff;
    font-size: 24px;
    margin-right: 15px;
}

.search-input-group input {
    flex: 1;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 24px;
    outline: none;
}

.search-input-group input::placeholder {
    color: rgba(255,255,255,0.4);
}

.search-results {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.search-suggestion {
    padding: 15px;
    color: rgba(255,255,255,0.8);
    background: rgba(255,255,255,0.05);
    border-radius: 10px;
    cursor: pointer;
    font-size: 16px;
    transition: background 0.2s, color 0.2s;
}

.search-suggestion:hover {
    background: rgba(255,255,255,0.15);
    color: #fff;
}

/* ========================================= */
/* MOBILE RESPONSIVE (MAX-WIDTH 768px)       */
/* ========================================= */

@media (max-width: 768px) {
    /* Navbar & Mobile Menu */
    .navbar { padding: 15px 20px; }
    .nav-links {
        display: none; /* hidden by default on mobile */
        flex-direction: column;
        position: absolute;
        top: 70px; /* height of navbar */
        left: 0;
        width: 100%;
        background: rgba(26, 26, 26, 0.98);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        padding: 20px;
        gap: 20px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    }
    .nav-links.active { display: flex; }
    
    #mobile-menu { display: block !important; }
    .nav-icons-container { margin-left: auto; margin-right: 15px; }

    /* Mobile Light Theme navbar dropdown adjustments */
    .navbar-wrapper.light-theme .nav-links {
        background: rgba(255, 255, 255, 0.98);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    }

    /* Index (Home) */
    .hero-title { font-size: 38px; padding: 0 15px; }
    .macbook-container { max-width: 90%; transform: scale(0.9); }
    .hero-section { min-height: 80vh; }
    .brands-section { padding: 50px 20px; }
    .brands-grid { grid-template-columns: 1fr; }

    /* Coleção (Products) */
    .catalog-main { padding: 40px 20px; }
    .product-grid { grid-template-columns: 1fr; } /* Stack products */
    .product-col-card { min-width: unset; width: 100%; }

    /* Detalhes do Produto */
    .details-main { padding: 40px 20px; }
    .details-container { flex-direction: column; gap: 40px; }
    .product-image-container, .product-info-container { width: 100%; max-width: 100%; }
    
    .reviews-section { flex-direction: column; padding: 0 20px 40px; }
    .reviews-left, .reviews-right { flex: unset; width: 100%; }
    .reviews-left h2 { font-size: 40px; text-align: center; }

    /* Login */
    .login-container { width: 90%; padding: 30px 20px; }

    /* Clientes Dashboard */
    .clientes-main { padding: 40px 20px; }
    .dashboard-bottom { flex-direction: column; align-items: center; gap: 40px; }
    .dashboard-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; text-align: center; }
    .dashboard-cards { flex-direction: column; width: 100%; align-items: center; }

    /* Subpages Glass (Carrinho, Suporte, Config) */
    .glass-page-main { padding: 20px; }
    .glass-container { padding: 20px; }
    .cart-item { flex-direction: column; align-items: flex-start; }
    .cart-item img { width: 100%; max-width: 200px; margin-bottom: 15px; }
    .cart-item-price, .cart-item-remove { margin-left: 0; margin-top: 10px; }
    .support-options { grid-template-columns: 1fr; }
    .toggle-group { flex-direction: column; align-items: flex-start; gap: 10px; }
}


/* New Hover Effects for Cards */
.product-card {
    transition: all 0.3s ease;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
}
.product-card:hover {
    background: rgba(119, 119, 120, 0.06) !important;
    transform: scale(1.03) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
}
.product-card:hover h3 {
    color: var(--text-primary) !important;
}
.product-card:hover p, .product-card:hover .desc {
    color: var(--text-secondary) !important;
}
.product-card:hover .img-wrapper img {
    transform: scale(1.06) !important;
}

.masonry-item {
    transition: all 0.3s ease;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
}
.masonry-item:hover {
    background: rgba(119, 119, 120, 0.06) !important;
    transform: scale(1.03) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
}
.masonry-item:hover h3 {
    color: var(--text-primary) !important;
}
.masonry-item:hover p, .masonry-item:hover .desc {
    color: var(--text-secondary) !important;
}
.masonry-item:hover img {
    transform: scale(1.06) !important;
}

/* ==========================================================================
   BENEFITS BAR
   ========================================================================== */
.benefits-bar {
    width: 100%;
    background: var(--bg-main);
    padding: 40px 5%;
    border-bottom: 1px solid var(--border-color);
}

.benefits-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.benefit-item {
    display: flex;
    align-items: center;
    gap: 15px;
    color: var(--text-primary);
}

.benefit-item i {
    font-size: 28px;
    color: var(--text-primary);
}

.benefit-text h4 {
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 3px;
    letter-spacing: 0.5px;
}

.benefit-text p {
    font-size: 12px;
    color: var(--text-secondary);
}

@media (max-width: 768px) {
    .benefits-container {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }
}

/* ==========================================================================
   SHOWCASE TABS (Novos Lançamentos e Mais Vendidos)
   ========================================================================== */
.showcase-tabs {
    display: flex;
    gap: 15px;
    margin-top: 30px;
}

.tab-btn {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: 10px 25px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
    transition: all 0.3s ease;
}

.tab-btn:hover {
    color: var(--text-primary);
    background: rgba(119, 119, 120, 0.06);
}

.tab-btn.active {
    background: var(--accent);
    color: var(--text-primary);
    border-color: var(--accent);
    font-weight: 500;
}

.session-6 {
    background-color: var(--bg-main) !important;
    color: var(--text-primary) !important;
}

.session-6 .s6-main-title {
    color: var(--text-primary) !important;
}

.session-6 .s6-main-desc {
    color: var(--text-secondary) !important;
}

/* ==========================================================================
   TESTIMONIALS SECTION
   ========================================================================== */
.testimonials-section {
    background: var(--bg-alt);
    padding: 100px 5%;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

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

.testimonials-title {
    font-size: 40px;
    font-weight: 700;
    text-align: center;
    color: var(--text-primary);
    margin-bottom: 60px;
    letter-spacing: -1px;
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.testimonial-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.3s ease;
}

.testimonial-card:hover {
    transform: translateY(-5px);
    border-color: var(--accent);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.testimonial-card .stars {
    color: #FFD700;
    font-size: 14px;
    margin-bottom: 20px;
}

.testimonial-card .text {
    color: var(--text-secondary);
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 30px;
    font-style: italic;
}

.testimonial-card .author {
    display: flex;
    align-items: center;
    gap: 15px;
}

.testimonial-card .avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 16px;
}

.testimonial-card .author-info h4 {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.testimonial-card .verified {
    font-size: 11px;
    color: #4CAF50;
    display: flex;
    align-items: center;
    gap: 4px;
}

@media (max-width: 768px) {
    .testimonials-grid {
        grid-template-columns: 1fr;
    }
    .testimonials-title {
        font-size: 30px;
        margin-bottom: 40px;
    }
}

/* ==========================================================================
   FOOTER SECURE BADGES
   ========================================================================== */
.footer-bottom-badges {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px 0;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 20px;
}

.payments-badge, .security-badge {
    display: flex;
    align-items: center;
    gap: 15px;
}

.payments-badge span, .security-badge span {
    font-size: 13px;
    color: var(--text-secondary);
}

.payment-icons {
    display: flex;
    gap: 12px;
    font-size: 24px;
    color: var(--text-primary);
}

.security-icons {
    display: flex;
    gap: 15px;
    font-size: 12px;
    color: var(--text-primary);
}

.security-icons span {
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--text-primary) !important;
}

.security-icons i {
    color: #4CAF50;
    font-size: 14px;
}

@media (max-width: 768px) {
    .footer-bottom-badges {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ==========================================================================
   PRODUCT PAGE GALLERY & LAYOUT
   ========================================================================== */
.product-gallery {
    width: 100%;
}

.main-image-card {
    transition: all 0.3s ease;
}

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

.thumb-card {
    transition: all 0.2s ease;
}

.thumb-card:hover {
    border-color: rgba(0, 0, 0, 0.4) !important;
}

.thumb-card.active {
    border-color: #000000 !important;
}

/* Specs Section Styling */
.specs-section {
    width: 100%;
}

.specs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.specs-card {
    transition: transform 0.2s, box-shadow 0.2s;
}

.specs-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.03);
}

@media (max-width: 768px) {
    .specs-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

/* ==========================================================================
   MOBILE ACCESSIBILITY & TAP TARGETS (min 48px)
   ========================================================================== */
@media (max-width: 768px) {
    /* Make buttons and links easier to tap on mobile */
    .filter-btn, .hero-cta-btn, .tab-btn, .col-btn, .add-to-cart-btn, .btn-pay {
        min-height: 48px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 12px 24px;
    }
    
    .nav-links li a {
        display: block;
        padding: 15px 20px;
        min-height: 48px;
    }

    .nav-icons a {
        padding: 10px;
        min-width: 48px;
        min-height: 48px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Spacing adjustments for mobile to prevent overflow and clean readability */
    .hero-section {
        padding: 40px 5%;
    }

    .benefits-bar {
        padding: 30px 5%;
    }

    .testimonials-section, .session-5, .session-6 {
        padding: 60px 5%;
    }

    .product-gallery .main-image-card {
        height: 350px !important;
    }

    .thumbnail-row .thumb-card {
        width: 65px !important;
        height: 65px !important;
    }

    .specs-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Premium CTA Hover Styles */
.hero-cta-btn {
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease, color 0.3s ease !important;
}
.hero-cta-btn:hover {
    transform: scale(1.05) !important;
    background: var(--btn-primary-hover) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important;
}
.hero-cta-btn.secondary:hover {
    transform: scale(1.05) !important;
    background: var(--accent-hover) !important;
    box-shadow: 0 10px 25px rgba(197, 168, 128, 0.2) !important;
    border-color: var(--accent-hover) !important;
}

/* ==========================================================================
   RESPONSIVIDADE GLOBAL + PERFORMANCE (v22)
   Ajustes finos para mobile sem alterar o layout em telas grandes.
   ========================================================================== */

/* Segurança contra estouro horizontal e imagens que vazam o container */
html, body { max-width: 100%; }
img { max-width: 100%; }

/* Mídia embutida (iframes do Instagram) nunca ultrapassa o container */
iframe { max-width: 100%; }

/* ---- NAVBAR MOBILE: logo à esquerda, hamburguer à direita, menu revelável ---- */
@media (max-width: 900px) {
    /* Barra superior: apenas logo (esquerda) + hamburguer (direita) */
    .navbar {
        display: flex;
        position: relative;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        padding: 12px 22px;
    }
    .home-page .navbar { padding: 10px 18px; }

    .logo { order: 1; }

    /* Hamburguer sempre visível, à direita, com cor adaptável ao fundo */
    #mobile-menu {
        display: block !important;
        order: 3;
        margin-left: auto;
        font-size: 22px !important;
        line-height: 1;
        z-index: 1002;
        color: #fff !important;
    }
    .light-theme #mobile-menu { color: #1A1A1A !important; }

    /* Ícones (carrinho/conta/busca) saem da barra — o JS os move para o menu */
    .navbar > .nav-icons-container { display: none; }

    /* Dropdown do menu: card escuro, idêntico em todas as páginas */
    .nav-links,
    .home-page .nav-links,
    .navbar-wrapper.light-theme .nav-links {
        display: none;
        position: absolute;
        top: calc(100% + 12px);
        left: 50%;
        transform: translateX(-50%);
        width: min(92%, 420px);
        flex-direction: column;
        gap: 4px;
        list-style: none;
        background: rgba(20, 22, 24, 0.98);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        padding: 14px;
        border-radius: 22px;
        box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4);
    }
    .nav-links.active,
    .home-page .nav-links.active {
        display: flex !important;
    }
    .nav-links li { width: 100%; }
    .nav-links li a,
    .home-page .nav-links li a,
    .navbar-wrapper.light-theme .nav-links li a {
        display: block;
        width: 100%;
        padding: 14px 16px;
        border-radius: 12px;
        color: #fff !important;
        font-size: 16px;
        font-weight: 400 !important;
        text-align: left;
        text-decoration: none;
        transition: background 0.2s ease;
    }
    .nav-links li a:hover {
        background: rgba(255, 255, 255, 0.08);
        opacity: 1;
    }

    /* Linha de ícones reposicionada dentro do menu */
    .nav-links .nav-icons-container {
        display: flex !important;
        width: 100%;
        margin: 8px 0 0 0;
        padding-top: 14px;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
        justify-content: center;
    }
    .nav-links .nav-icons,
    .home-page .nav-links .nav-icons {
        background: transparent !important;
        padding: 4px 0 !important;
        gap: 34px !important;
        display: flex;
    }
    .nav-links .nav-icons a,
    .home-page .nav-links .nav-icons a {
        color: #fff !important;
        font-size: 20px !important;
    }
}

/* ---- Performance: reduz blurs pesados de fundo no mobile ---- */
@media (max-width: 768px) {
    .bg-layer::before,
    .session-4::before {
        filter: blur(40px);
        width: 150%;
        height: 150%;
    }
}

/* ---- Hero / animação de scroll mais curta e leve no mobile ---- */
@media (max-width: 768px) {
    /* Sequência de scroll menor = menos "scroll-jacking" e mais fluidez */
    .scroll-sequence { height: 130vh; }

    /* Conteúdo um pouco abaixo do topo, tendendo ao centro */
    .sticky-container {
        justify-content: flex-start;
        padding-top: 165px;
        padding-bottom: 0;
    }

    /* Remove a altura forçada que empurrava o mockup para o fundo.
       flex-shrink:0 evita que o texto seja comprimido/sobreposto */
    .hero-section {
        min-height: 0;
        margin-top: 0;
        padding: 0 20px;
        flex-shrink: 0;
    }
    .mockup-container { flex-shrink: 0; }
    .hero-section h1 { font-size: 30px; }
    .hero-section p { font-size: 15px; }

    /* Mockup vira um iPhone (tela preta) com o iPhone azul dentro */
    .mockup-container {
        width: 60%;
        max-width: 250px;
        aspect-ratio: 9 / 19.5;
        margin: 26px auto 0;
    }
    /* Esconde a moldura do macbook no mobile */
    .macbook-img { display: none !important; }

    /* .inner-screen passa a ser o corpo/tela do celular */
    .inner-screen {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 42px;
        background: #000;
        box-shadow: 0 0 0 9px #1c1c1e, 0 24px 45px rgba(0, 0, 0, 0.35);
    }
    /* Dynamic island no topo da tela (some junto com o corpo no scroll) */
    .inner-screen::after {
        content: '';
        position: absolute;
        top: 14px;
        left: 50%;
        transform: translateX(-50%);
        width: 34%;
        height: 15px;
        background: #0b0b0b;
        border-radius: 20px;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
    }
    /* iPhone azul posicionado dentro da tela preta */
    .iphone-img {
        top: 12%;
        height: 76%;
        max-width: 86%;
        width: auto;
        object-fit: contain;
    }

    .section-2-content h2 { font-size: 26px; }
    .section-2-content p.lead { font-size: 16px; margin-bottom: 14px; }
    .section-2-content p { font-size: 14px; margin-bottom: 10px; }
    .section-2-content p:last-of-type { margin-bottom: 20px; }

    /* Barra de benefícios com respiro entre ícone e texto */
    .benefit-item { gap: 12px; }
}

/* ---- Session 4: evita que a imagem central estoure a tela no mobile ---- */
@media (max-width: 768px) {
    .session-4 { min-height: auto; padding-bottom: 40px; }
    .s4-col-center { padding: 20px 0 !important; }
    .s4-col-center img {
        height: auto;
        max-height: 60vh;
        max-width: 80%;
        transform: none;
    }
    .s4-col-right img { width: 200px; }
}

/* ---- Telas pequenas (celulares comuns, <=480px) ---- */
@media (max-width: 480px) {
    .hero-section h1 { font-size: 26px; }
    .sub-head { font-size: 12px; padding: 7px 18px; }

    /* Benefícios em grade 2x2, formato de card centralizado */
    .benefits-container { grid-template-columns: 1fr 1fr; gap: 14px; }
    .benefit-item {
        flex-direction: column;
        text-align: center;
        gap: 8px;
        padding: 18px 10px;
        background: var(--bg-card);
        border: 1px solid var(--border-color);
        border-radius: 16px;
    }
    .benefit-item i { font-size: 24px; }
    .benefit-text h4 { font-size: 14px; }
    .benefit-text p { font-size: 12px; }

    .s4-col-left h2 { font-size: 38px; }
    .s5-title { font-size: 30px; }
    .s6-main-title { font-size: 36px; }
    .s6-main-desc { font-size: 16px; }
    .testimonials-title { font-size: 26px; }

    /* Cards de produto mais baixos para não gerar rolagem gigante */
    .product-card { min-height: 420px; padding: 22px; }
    .product-card h3 { font-size: 24px; }

    /* Reduz padding lateral das seções para aproveitar a largura */
    .session-3 { padding: 40px 16px; }
    .testimonials-section, .session-5, .session-6 { padding: 50px 16px; }

    /* Footer badges empilhados e centralizados */
    .footer-bottom-badges { align-items: center; text-align: center; }
    .payments-badge, .security-badge { flex-direction: column; gap: 8px; }
}

/* ==========================================================================
   BANNER DAS PÁGINAS DE COLEÇÃO (/iphone, /macs, /jbl, /playstation, ...)
   Corrige: logo gigante do banner colidindo com o texto + navbar sem estilo.
   ========================================================================== */

/* Root-cause: a logo da navbar só tinha tamanho definido na home. Nas demais
   páginas ela renderizava no tamanho natural (gigante). Regra global corrige. */
.navbar .logo img {
    height: 35px;
    width: auto;
    display: block;
}

/* Scrim (gradiente escuro) para o texto ter contraste sobre o banner */
.col-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg,
        rgba(0, 0, 0, 0.70) 0%,
        rgba(0, 0, 0, 0.45) 42%,
        rgba(0, 0, 0, 0.05) 72%,
        rgba(0, 0, 0, 0) 100%);
    pointer-events: none;
}

/* Navbar styles are now handled globally */

/* Ajustes MOBILE do banner de coleção.
   A imagem do banner tem uma logo enorme embutida que fica ilegível no celular,
   então no mobile trocamos por um fundo em gradiente da marca (limpo e legível). */
@media (max-width: 768px) {
    .col-hero {
        min-height: 46vh;
        padding: 120px 22px 45px;   /* espaço para a navbar fixa no topo */
        background: linear-gradient(155deg, #0d4f49 0%, #157f74 55%, #082e2b 100%);
    }
    .col-hero-bg { display: none; }        /* esconde a imagem bagunçada */
    .col-hero::before { display: none; }   /* scrim desnecessário sobre fundo sólido */
    .col-hero-content { max-width: 100%; }
    .col-subtitle { font-size: 18px; }
    .col-title { font-size: 30px; line-height: 1.15; }
    .col-desc { font-size: 15px; }
}

@keyframes swipe-anim {
    0%, 100% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(-4px);
    }
    75% {
        transform: translateX(4px);
    }
}

/* A face Black da Helvetica Neue, declarada sem local(). O CSS do cdnfonts
   usa local('Helvetica Neue') antes da URL, e em macOS isso resolve para a
   fonte do sistema — que só tem um peso. Sem esta declaração, o título
   renderiza igual em 400, 700 ou 900 dependendo da máquina do visitante. */
@font-face {
    font-family: 'HelveticaNeueDisplay';
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    src: url('https://fonts.cdnfonts.com/s/62895/HelveticaNeueBold.woff') format('woff');
}

/* ============================================================================
   HERO — reprodução fiel do frame Figma "iphone 18" (node 86:2)

   Frame de 1920x1080. Todas as medidas saem do Figma divididas por 19.2 para
   virar vw, e a seção tem a mesma proporção (56.25vw = 1080/1920), então cada
   elemento cai na coordenada exata do design em qualquer largura.
   ========================================================================== */

.hero18 {
    position: relative;
    width: 100%;
    height: 56.25vw;        /* 1080/1920 */
    background: #000;
    overflow: hidden;
    isolation: isolate;
}

/* Logotipo "iPhone 18 PRO" (99:7) — é vetor, não texto */
.hero18-logo {
    position: absolute;
    left: 10.1563vw;        /* 8.33% + 35px = 195 */
    top: 10.4167vw;         /* 200 */
    width: 45.2083vw;       /* 868 */
    height: 15.8333vw;      /* 304 */
    z-index: 2;
}

/* Botão verde (86:41) */
.hero18-cta {
    position: absolute;
    left: 32.7344vw;        /* 29.17% + 68.5px = 628.5 */
    top: 26.6729vw;         /* 512.12 */
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16.1979vw;       /* 311 */
    height: 3.8414vw;       /* 73.755 */
    border-radius: 3.2011vw;/* 61.462 */
    background: linear-gradient(180deg, #99F924 0%, #D6FFA3 100%);
    color: #000;
    font-size: 1.4315vw;    /* 27.484 */
    font-weight: 400;
    text-decoration: none;
    white-space: nowrap;
    z-index: 3;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s ease;
}
.hero18-cta:hover { transform: translateX(-50%) translateY(-2px) scale(1.02); filter: brightness(1.06); }

/* Bloco "Outros Produtos" (99:6) */
.hero18-outros {
    position: absolute;
    left: 11.6667vw;        /* 8.33% + 64px = 224 */
    top: 34.6875vw;         /* 666 */
    width: 42.1702vw;       /* 809.668 */
    display: flex;
    flex-direction: column;
    gap: 1.0938vw;          /* 21 */
    z-index: 3;
}
.hero18-outros-titulo {
    margin: 0;
    font-size: 1.4315vw;    /* 27.484 */
    font-weight: 300;
    color: #FFFFFF;
    text-align: center;
}

.hero18-cards {
    display: flex;
    gap: 0.9896vw;          /* 19 */
    width: 100%;
}

/* Faixa vertical de câmeras (99:3). O arquivo já vai girado; o Figma faz a
   rotação por transform, mas girar na imagem evita transform aninhado. */
.hero18-arte {
    position: absolute;
    left: 62.7083vw;        /* 58.33% + 84px = 1204 */
    top: 5.8333vw;          /* 112 */
    width: 24.7917vw;       /* 476 */
    height: 50.9375vw;      /* 978 */
    object-fit: cover;
    z-index: 2;
    pointer-events: none;
}

/* --- Cards de produto (86:58 e 86:67) ------------------------------------- */

.h18-card {
    position: relative;
    display: block;
    flex: 1;
    height: 8.3066vw;       /* 159.487 */
    border-radius: 1.0069vw;/* 19.332 */
    background: #FFFFFF;
    color: #000;
    text-decoration: none;
    overflow: hidden;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.h18-card:hover { transform: translateY(-0.3vw); }
.h18-card:hover .h18-card-img { transform: scale(1.06); }

/* Medidas internas em % do card (395.334 x 159.487) */
.h18-badge {
    position: absolute;
    left: 4.89%;            /* 19.33/395.334 */
    top: 13%;
    padding: 0.18vw 0.36vw;
    border-radius: 3vw;
    background: #EEEEEE;
    /* No Figma são 5,98px. Piso de 9px porque abaixo disso fica ilegível. */
    font-size: max(9px, 0.3117vw);
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}
.h18-price {
    position: absolute;
    left: 4.89%;
    top: 34%;
    margin: 0;
    font-size: 1.1712vw;    /* 22.486 */
    font-weight: 300;
    white-space: nowrap;
}
.h18-installments {
    position: absolute;
    left: 4.89%;
    top: 53.3%;
    margin: 0;
    width: 33.25%;          /* 131.456/395.334 */
    font-size: max(8px, 0.4531vw);   /* 8.699 */
    font-weight: 300;
    line-height: 1.25;
}
.h18-more {
    position: absolute;
    left: 4.89%;
    top: 74.5%;
    font-size: max(10px, 0.6601vw);  /* 12.674 */
    font-weight: 300;
    color: #000;
    text-decoration: underline;
}
.h18-card-img {
    position: absolute;
    left: 50.12%;           /* 198.15/395.334 */
    top: 5.9%;              /* 9.43/159.487 */
    width: 44.68%;          /* 176.609/395.334 */
    height: 94.1%;          /* 150.056/159.487 */
    object-fit: contain;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- Entrada --------------------------------------------------------------- */

.hero18-logo,
.hero18-arte,
.hero18-cta,
.hero18-outros { animation: hero18-entrada 0.9s cubic-bezier(0.16, 1, 0.3, 1) both; }
.hero18-logo    { animation-delay: 0.05s; }
.hero18-arte   { animation-delay: 0.16s; }
.hero18-outros  { animation-delay: 0.40s; }

@keyframes hero18-entrada {
    from { opacity: 0; transform: translateY(1.4vw); }
    to   { opacity: 1; transform: translateY(0); }
}
/* O botão já usa translateX para centralizar; sem keyframe próprio a
   animação zeraria esse deslocamento e o jogaria para a direita. */
@keyframes hero18-entrada-centro {
    from { opacity: 0; transform: translateX(-50%) translateY(1.4vw); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.hero18-cta { animation-name: hero18-entrada-centro; animation-delay: 0.28s; }

@media (prefers-reduced-motion: reduce) {
    .hero18-logo, .hero18-arte, .hero18-cta, .hero18-outros { animation: none; }
}

/* --- Hero no mobile --------------------------------------------------------
   Mesma identidade do desktop, reorganizada para a vertical: logotipo e botão
   no topo, os três aparelhos lado a lado no pé. O bloco "Outros Produtos" sai
   — dois cards de 395px não cabem lado a lado numa tela de celular.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .hero18 {
        height: auto;
        /* Sem teto o `margin: auto` da faixa empurrava os aparelhos para o pé
           da tela e abria um vão preto enorme sob o botão. */
        min-height: 0;
        padding: 104px 20px 0;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .hero18-outros { display: none !important; }

    .hero18-logo {
        position: static;
        width: min(100%, 420px);
        height: auto;
        margin: 0 auto;
    }

    .hero18-cta {
        position: static;
        transform: none;
        display: flex;
        width: 253px;       /* medida do frame */
        height: 60px;
        margin: 26px auto 0;
        border-radius: 50px;
        font-size: 19px;
    }
    .hero18-cta:hover { transform: translateY(-2px); }

    /* Faixa vertical no pé — os três empilhados, como no desktop.
       Largura limitada porque a proporção é 526x1080: em 100% da tela ela
       passaria de 800px de altura e a hero viraria duas telas de rolagem. */
    .hero18-arte {
        position: static;
        width: min(76%, 300px);
        max-width: none;
        height: auto;
        margin: 40px auto 0;
        object-fit: contain;
    }

    .hero18-logo, .hero18-arte, .hero18-cta { animation-name: hero18-entrada; }
}

@media (max-width: 480px) {
    .hero18 { padding: 92px 16px 0; }
    .hero18-cta { width: min(253px, 78vw); font-size: 18px; margin-top: 22px; }
    .hero18-arte { width: min(80%, 270px); margin: 32px auto 0; }
}

/* ============================================================================
   NAVBAR — padrão do Figma (node 86:6)
   Antes era uma pílula preta flutuante (max-width 1100, radius 50, borda).
   No frame é uma barra translúcida de largura total encostada no topo:
   barra 77px em rgba(5,21,38,0.3), linha interna de 1810/1920 = 94,26%,
   logo à esquerda, links no meio, pílula branca de ícones à direita.
   ========================================================================== */

.navbar-container,
.navbar-wrapper {
    width: 100%;
    height: 62px;
    display: flex;
    align-items: center;
    background: rgba(5, 21, 38, 0.3);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    /* o padding/margem que empurravam a pílula para baixo do topo */
    padding-top: 0 !important;
    margin-top: 0 !important;
}

.navbar {
    width: 94.26%;          /* 1809.778/1920 */
    max-width: 1810px;
    margin: 0 auto;
    height: 38px;
    padding: 0 !important;
    background-color: transparent !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 0 !important;
    border-radius: 0 !important;
}

/* Menor que o frame por pedido: o Figma usa 22,7px de fonte e 40px de gap,
   o que fica pesado numa tela real. Reduzido para ~15px / 26px. */
.nav-links { gap: clamp(14px, 1.35vw, 26px); }
.nav-links li a { font-size: clamp(12.5px, 0.78vw, 15px); }

.logo img { height: 28px; }

.nav-icons {
    padding: 7px 16px;
    gap: clamp(10px, 0.62vw, 12px);
    font-size: 13px;
}
.nav-icons a { font-size: 14px; }

/* A home tem a navbar fixa; as demais usam .navbar-absolute. Nos dois casos
   a barra agora encosta no topo, então o deslocamento antigo sai. */
.navbar-absolute { margin-top: 0 !important; }

@media (max-width: 900px) {
    .navbar-container,
    .navbar-wrapper { height: 56px; }
    .navbar { height: 36px; }
}

/* ============================================================================
   MOVIMENTO — entrada por scroll e hover dos produtos
   O scroll suave em si vem do Lenis (ver movimento.js).
   ========================================================================== */

/* Estado inicial dos blocos que entram ao aparecer na tela. A classe só é
   aplicada por JS: sem JS nada fica invisível. */
.js-revelar {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}
.js-revelar.visivel { opacity: 1; transform: none; }

/* Escalonamento dentro de uma mesma grade */
.js-revelar[data-atraso="1"] { transition-delay: 0.08s; }
.js-revelar[data-atraso="2"] { transition-delay: 0.16s; }
.js-revelar[data-atraso="3"] { transition-delay: 0.24s; }
.js-revelar[data-atraso="4"] { transition-delay: 0.32s; }
.js-revelar[data-atraso="5"] { transition-delay: 0.40s; }

/* --- Hover dos produtos --------------------------------------------------- */

.product-card,
.masonry-item,
.s6-card,
.product-col-card {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.4s ease,
                border-color 0.4s ease;
}

.product-card:hover,
.masonry-item:hover,
.s6-card:hover,
.product-col-card:hover {
    transform: translateY(-8px) !important;
}

/* A imagem cresce um pouco dentro do card, sem vazar */
.product-card .img-wrapper,
.s6-product-image,
.product-col-card .img-wrapper { overflow: hidden; }

.product-card img,
.s6-product-image img,
.product-col-card img {
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.product-card:hover img,
.s6-card:hover .s6-product-image img,
.product-col-card:hover img { transform: scale(1.08); }

/* Categorias da home ganham um brilho sutil */
.session-3 .product-card { position: relative; overflow: hidden; }
.session-3 .product-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 80% at 50% 100%, rgba(206, 231, 230, 0.35), transparent 70%);
    opacity: 0;
    transition: opacity 0.45s ease;
    pointer-events: none;
}
.session-3 .product-card:hover::after { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
    .js-revelar { opacity: 1; transform: none; transition: none; }
    .product-card:hover,
    .masonry-item:hover,
    .s6-card:hover,
    .product-col-card:hover { transform: none !important; }
    .product-card:hover img,
    .s6-card:hover .s6-product-image img { transform: none; }
}

/* ============================================================================
   RODAPÉ — escuro, no tom da hero nova
   O anterior era cinza-claro genérico e destoava do resto do site.
   ========================================================================== */

.site-footer {
    background: #08080A;
    color: rgba(255, 255, 255, 0.62);
    padding: 84px 6% 28px;
    border-top: 0;
    position: relative;
    overflow: hidden;
}

/* Brilho discreto que amarra o rodapé com o carmim da hero */
.site-footer::before {
    content: '';
    position: absolute;
    left: 50%;
    top: -55%;
    width: 90%;
    height: 120%;
    transform: translateX(-50%);
    background: radial-gradient(50% 50% at 50% 50%, rgba(193, 75, 109, 0.16), transparent 70%);
    pointer-events: none;
}

.footer-container { max-width: 1240px; margin: 0 auto; position: relative; }

.footer-topo {
    display: grid;
    grid-template-columns: 1.7fr 1fr 1fr 1.3fr;
    gap: 48px;
    padding-bottom: 52px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.footer-marca .footer-logo { width: 178px; height: auto; display: block; margin-bottom: 18px; }
.footer-tagline { margin: 0 0 22px; font-size: 14.5px; line-height: 1.6; max-width: 330px; }

.footer-social { display: flex; gap: 12px; }
.footer-social a {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #fff;
    font-size: 15px;
    text-decoration: none;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s ease, border-color 0.3s ease;
}
.footer-social a:hover {
    transform: translateY(-3px);
    background: #99F924;
    border-color: #99F924;
    color: #000;
}

.footer-col h4 {
    margin: 0 0 18px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #FFFFFF;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.footer-col ul li a {
    color: rgba(255, 255, 255, 0.62);
    font-size: 14.5px;
    text-decoration: none;
    transition: color 0.25s ease, padding-left 0.25s ease;
}
.footer-col ul li a:hover { color: #FFFFFF; padding-left: 5px; }

.footer-cta-zap {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 12px 20px;
    border-radius: 50px;
    background: linear-gradient(180deg, #99F924 0%, #D6FFA3 100%);
    color: #000;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}
.footer-cta-zap:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(153, 249, 36, 0.28); }

.footer-horario { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-horario li { display: flex; align-items: center; gap: 9px; font-size: 13.5px; }
.footer-horario i { color: #99F924; width: 15px; }

.footer-selos {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    padding: 26px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}
.footer-selo-grupo { display: flex; align-items: center; gap: 14px; }
.footer-selo-grupo > span {
    font-size: 11px;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.42);
}
.footer-icones { display: flex; align-items: center; gap: 14px; font-size: 21px; color: rgba(255, 255, 255, 0.78); }
.footer-icones--texto { font-size: 13px; gap: 18px; }
.footer-icones--texto span { display: inline-flex; align-items: center; gap: 7px; }
.footer-icones--texto i { color: #99F924; }

.footer-base {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding-top: 22px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.42);
}
.footer-base p { margin: 0; }

@media (max-width: 900px) {
    .site-footer { padding: 60px 6% 24px; }
    .footer-topo { grid-template-columns: 1fr 1fr; gap: 36px; }
    .footer-marca { grid-column: 1 / -1; }
    .footer-tagline { max-width: none; }
    .footer-selos { gap: 24px; }
    .footer-base { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 560px) {
    .footer-topo { grid-template-columns: 1fr; }
    .footer-selo-grupo { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ============================================================================
   SUPERFÍCIE ÚNICA — fundo branco e sem linhas divisórias
   Pedido: o site inteiro em branco, exceto a hero, e sem nenhuma régua
   separando as seções. Como fundo e card ficam ambos brancos, o que passa a
   dar contorno ao card é a sombra, não a borda.
   ========================================================================== */

:root {
    --bg-main: #FFFFFF;
    --bg-alt: #FFFFFF;
}

body,
body.home-page,
body.collection-page,
.session-3,
.session-5,
.session-6,
.benefits-bar,
.testimonials-section,
.col-carousel-section,
.site-footer {
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
}

/* --- Fora as réguas entre seções ------------------------------------------ */
.benefits-bar,
.testimonials-section,
.col-carousel-section,
.site-footer,
.footer-bottom,
.footer-bottom-badges,
.footer-topo,
.footer-selos,
.cms-banner-placeholder {
    border-top: 0 !important;
    border-bottom: 0 !important;
}

/* --- Cards sem borda e sem sombra ----------------------------------------- */
/* O produto passa a "flutuar" no branco: sem contorno e sem sombra, quem
   delimita o card é o próprio espaçamento. */
.product-card,
.masonry-item,
.s6-card,
.product-col-card,
.testimonial-card {
    border: 0 !important;
}

/* --- Rodapé claro --------------------------------------------------------- */
/* Ele tinha sido feito escuro; com o site todo branco, volta a ser claro
   mantendo a estrutura nova (colunas, CTA de WhatsApp, selos). */
.site-footer { color: var(--text-secondary); padding-top: 72px; }
.site-footer::before { display: none; }   /* brilho carmim não cabe no branco */

.footer-tagline { color: var(--text-secondary); }
.footer-col h4 { color: var(--text-primary); }
.footer-col ul li a { color: var(--text-secondary); }
.footer-col ul li a:hover { color: var(--text-primary); }

.footer-social a {
    border: 1px solid rgba(26, 26, 26, 0.14);
    color: var(--text-primary);
}
.footer-social a:hover { background: #1A1A1A; border-color: #1A1A1A; color: #FFFFFF; }

.footer-horario li { color: var(--text-secondary); }
.footer-horario i { color: #1A1A1A; }

.footer-selo-grupo > span { color: rgba(26, 26, 26, 0.45); }
.footer-icones { color: rgba(26, 26, 26, 0.72); }
.footer-icones--texto i { color: #1A1A1A; }
.footer-base { color: rgba(26, 26, 26, 0.45); }

.footer-cta-zap {
    background: #1A1A1A;
    color: #FFFFFF;
}
.footer-cta-zap:hover { box-shadow: 0 10px 26px rgba(0, 0, 0, 0.18); }

/* Separação entre blocos do rodapé por espaço, não por linha */
.footer-topo { padding-bottom: 40px; }
.footer-selos { padding: 28px 0; }
.footer-base { padding-top: 20px; }

/* ============================================================================
   SEM SOMBRAS
   Pedido: nenhum box-shadow no site. O !important também vence os shadows
   declarados inline no HTML. As páginas do admin usam admin-style.css e não
   carregam este arquivo, então não são afetadas.
   ========================================================================== */
*, *::before, *::after { box-shadow: none !important; }

/* ============================================================================
   DESTAQUES DA LOJA — respiro entre os produtos
   Era um flex com space-between e gap zero: com 4 cards os produtos ficavam
   encostados. Vira grade de 4 colunas com espaçamento de verdade.
   ========================================================================== */
.s6-bottom-content {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 48px;
    align-items: stretch;
    width: 100%;
    margin-top: 56px;
}

.s6-bottom-content .product-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 28px 20px !important;
    min-height: 0;
}

@media (max-width: 1200px) {
    .s6-bottom-content { grid-template-columns: repeat(2, 1fr); gap: 40px; }
}
@media (max-width: 620px) {
    .s6-bottom-content { grid-template-columns: 1fr; gap: 32px; }
}

/* ============================================================================
   CARDS DE PRODUTO EM CINZA CLARO
   Com a página branca e sem sombra nem borda, card branco sumia no fundo.
   O cinza devolve o contraste sem reintroduzir contorno.

   O !important é necessário porque o JS que monta os cards define
   `style="background: var(--bg-card)"` direto no elemento. Não mexi na
   variável --bg-card porque ela também pinta inputs, botões e miniaturas.
   ========================================================================== */

.product-card,
.s6-card,
.product-col-card,
.masonry-item,
.main-image-card,
.thumb-card,
.specs-card {
    background: #F4F4F6 !important;
}

/* A imagem do produto mantém o fundo do card, sem "caixa branca" por dentro */
.product-card .img-wrapper,
.s6-product-image,
.product-col-card .img-wrapper {
    background: transparent !important;
}

/* No hover o card clareia de leve, sinalizando que é clicável */
.product-card:hover,
.s6-card:hover,
.product-col-card:hover,
.masonry-item:hover {
    background: #EFEFF2 !important;
}

/* ============================================================================
   ALINHAMENTO E RESPIRO
   Antes cada seção começava num x diferente (75, 120, 130, 150) e tinha
   largura própria (700 a 1350). Aqui todas passam a usar a mesma faixa de
   1240px centrada, e o espaçamento vertical cai de 100px para 72px.
   A hero fica de fora: ela é um palco de largura total.
   ========================================================================== */

.benefits-bar,
.session-3,
.session-5,
.session-6,
.testimonials-section,
.site-footer,
.col-carousel-section {
    /* Faixa única: o conteúdo mede sempre 1240px (ou a tela menos 48px),
       começando no mesmo ponto em todas as seções. */
    padding-left: max(24px, calc((100% - 1240px) / 2)) !important;
    padding-right: max(24px, calc((100% - 1240px) / 2)) !important;
}

/* Os contêineres internos não podem centralizar de novo por cima da faixa,
   senão voltam a divergir. */
.benefits-container,
.testimonials-container,
.footer-container,
.s5-grid {
    max-width: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* --- Espaçamento vertical -------------------------------------------------- */

.session-3,
.session-5,
.session-6,
.testimonials-section {
    padding-top: 72px !important;
    padding-bottom: 72px !important;
}

.benefits-bar { padding-top: 32px !important; padding-bottom: 32px !important; }

.site-footer { padding-top: 64px !important; padding-bottom: 24px !important; }
.footer-grid { margin-bottom: 0 !important; }

/* O bloco de texto dos "Destaques" tinha 80px até a grade */
.s6-top-left { margin-bottom: 40px !important; max-width: 720px; }
.s6-bottom-content { margin-top: 40px !important; }

/* Cards de categoria com 550px de altura mínima esticavam a seção 3 em
   ~1330px. A imagem não precisa de tanto espaço. */
.session-3 .product-card { min-height: 420px !important; }
.products-grid-3,
.products-grid-4 { gap: 24px !important; }

.s5-title { margin-bottom: 32px !important; }

@media (max-width: 900px) {
    .session-3,
    .session-5,
    .session-6,
    .testimonials-section { padding-top: 52px !important; padding-bottom: 52px !important; }
    .session-3 .product-card { min-height: 340px !important; }
}

/* ============================================================================
   RODAPÉ — coluna de Atendimento
   O botão de WhatsApp encostava na linha "Seg a Sex": `.footer-horario` pedia
   margin-top de 18px, mas `.footer-col ul` (especificidade maior, por ser
   classe + elemento) impunha margin:0 e vencia, independente da ordem.
   Qualificar com o elemento empata a especificidade e a ordem decide.
   ========================================================================== */

.footer-col ul.footer-horario {
    margin-top: 20px !important;
    gap: 12px;
}

.footer-contato .footer-cta-zap {
    /* Área de toque confortável e alinhada ao início da coluna */
    margin-top: 2px;
    padding: 13px 22px;
    line-height: 1;
}

.footer-contato .footer-cta-zap i { font-size: 16px; }

/* ============================================================================
   CARRINHO
   Antes era o layout "glass": caixa cinza translúcida sobre fundo cinza, com
   borda e texto de baixo contraste. Aqui vira página branca, no mesmo padrão
   de largura das demais seções.
   ========================================================================== */

.carrinho-pagina {
    background: #FFFFFF;
    min-height: 70vh;
    padding: 118px 0 90px;   /* 118 = navbar + respiro */
}

.carrinho-faixa {
    width: 100%;
    max-width: 1240px;       /* mesma faixa das outras seções */
    margin: 0 auto;
    padding: 0 24px;
}

.carrinho-topo { margin-bottom: 32px; }
.carrinho-titulo {
    margin: 0;
    font-size: clamp(30px, 3.4vw, 46px);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--text-primary);
}
.carrinho-contagem { margin: 6px 0 0; font-size: 14px; color: var(--text-secondary); }

.carrinho-grid {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 56px;
    align-items: start;
}

/* --- Lista de itens -------------------------------------------------------- */

.carrinho-item {
    display: grid;
    grid-template-columns: 104px 1fr auto;
    gap: 24px;
    align-items: center;
    padding: 24px 0;
    /* Uma linha fina só entre itens, para separar sem virar caixa. */
    border-top: 1px solid rgba(26, 26, 26, 0.10);
}
.carrinho-item:first-child { border-top: 0; padding-top: 0; }

.carrinho-item-foto {
    width: 104px;
    height: 104px;
    object-fit: contain;
    border-radius: 14px;
    background: #F4F4F6;    /* mesmo cinza dos cards de produto */
    padding: 10px;
}

.carrinho-item-info h3 {
    margin: 0 0 4px;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}
.carrinho-item-variante { margin: 0 0 2px; font-size: 13.5px; color: var(--text-secondary); }
.carrinho-item-unitario { margin: 0 0 10px; font-size: 13px; color: rgba(26, 26, 26, 0.45); }

.carrinho-remover {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0;
    background: none;
    border: 0;
    font-size: 13px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: color 0.2s ease;
}
.carrinho-remover:hover { color: #D93025; }

.carrinho-item-controles {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 14px;
}

.carrinho-qtd {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #F4F4F6;
    border-radius: 50px;
    padding: 5px;
}
.carrinho-qtd button {
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--text-primary);
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s ease;
}
.carrinho-qtd button:hover { background: #E4E4E8; }
.carrinho-qtd span { min-width: 26px; text-align: center; font-size: 15px; font-weight: 600; }

.carrinho-item-preco { font-size: 19px; font-weight: 600; color: var(--text-primary); white-space: nowrap; }

/* --- Resumo ---------------------------------------------------------------- */

.carrinho-resumo {
    position: sticky;
    top: 96px;
    background: #F4F4F6;
    border-radius: 20px;
    padding: 28px;
}
.carrinho-resumo h2 {
    margin: 0 0 20px;
    font-size: 17px;
    font-weight: 600;
    color: var(--text-primary);
}
.resumo-linha {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 9px 0;
    font-size: 14.5px;
    color: var(--text-secondary);
}
.resumo-gratis { color: #1E8E3E; font-weight: 600; }
.resumo-total {
    margin-top: 10px;
    padding-top: 16px;
    border-top: 1px solid rgba(26, 26, 26, 0.12);
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
}

.carrinho-finalizar {
    display: block;
    width: 100%;
    margin-top: 20px;
    padding: 15px 20px;
    border: 0;
    border-radius: 50px;
    background: #1A1A1A;
    color: #FFFFFF;
    font-size: 15.5px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), background 0.25s ease;
}
.carrinho-finalizar:hover { transform: translateY(-2px); background: #000; }

.carrinho-continuar {
    display: block;
    margin-top: 12px;
    font-size: 13.5px;
    text-align: center;
    color: var(--text-secondary);
    text-decoration: underline;
}

.carrinho-selos { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.carrinho-selos li { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--text-secondary); }
.carrinho-selos i { width: 14px; color: #1A1A1A; }

/* --- Vazio ----------------------------------------------------------------- */

.carrinho-vazio { text-align: center; padding: 60px 20px; }
.carrinho-vazio i { font-size: 44px; color: rgba(26, 26, 26, 0.16); }
.carrinho-vazio p { margin: 18px 0 24px; font-size: 16px; color: var(--text-secondary); }
.carrinho-vazio .carrinho-finalizar { width: auto; display: inline-block; padding: 13px 32px; }

@media (max-width: 900px) {
    .carrinho-pagina { padding: 96px 0 64px; }
    .carrinho-grid { grid-template-columns: 1fr; gap: 34px; }
    .carrinho-resumo { position: static; }
    .carrinho-item { grid-template-columns: 84px 1fr; gap: 16px; }
    .carrinho-item-foto { width: 84px; height: 84px; }
    /* Quantidade e preço passam para a linha de baixo, ocupando as duas colunas */
    .carrinho-item-controles {
        grid-column: 1 / -1;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

/* ============================================================================
   CATEGORIA SEM PRODUTOS
   O catálogo da Azirt pode voltar vazio. Antes a página só dizia "Nenhum
   produto encontrado" e virava um beco sem saída.
   ========================================================================== */
.categoria-vazia {
    max-width: 560px;
    margin: 40px auto 20px;
    padding: 48px 32px;
    border-radius: 20px;
    background: #F4F4F6;
    text-align: center;
}
.categoria-vazia i { font-size: 40px; color: rgba(26, 26, 26, 0.22); }
.categoria-vazia h3 {
    margin: 20px 0 10px;
    font-size: 21px;
    font-weight: 600;
    color: var(--text-primary);
}
.categoria-vazia p {
    margin: 0 auto 26px;
    max-width: 420px;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--text-secondary);
}
.categoria-vazia-acoes { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.categoria-vazia-zap {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 13px 26px;
    border-radius: 50px;
    background: #1A1A1A;
    color: #FFFFFF;
    font-size: 14.5px;
    font-weight: 600;
    text-decoration: none;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.categoria-vazia-zap:hover { transform: translateY(-2px); }
.categoria-vazia-link { font-size: 13.5px; color: var(--text-secondary); text-decoration: underline; }

/* ============================================================================
   HERO DAS CATEGORIAS — enquadramento do banner
   O `height: 80vh` com `object-fit: cover` recortava a arte pelas laterais:
   o banner é 1920x735 (2,61:1) e o bloco virava 1,4:1 numa tela alta, então
   o navegador ampliava ~80% e cortava os produtos. Agora o bloco assume a
   mesma proporção da arte e ela aparece inteira.
   ========================================================================== */
.col-hero {
    height: auto !important;
    aspect-ratio: 1920 / 735;
    min-height: 340px;
    max-height: 78vh;
}

.col-hero-bg {
    /* `contain` garantiria zero corte, mas deixaria faixas pretas quando a
       proporção da tela não bater. Com o aspect-ratio acima o corte do
       `cover` fica em poucos pixels. */
    object-fit: cover;
    object-position: center;
}

@media (max-width: 900px) {
    .col-hero {
        aspect-ratio: auto;
        min-height: 0;
        max-height: none;
        padding: 92px 20px 36px;
        align-items: flex-end;
    }
    /* No celular a arte é fundo: o card de texto fica por cima. */
    .col-hero-bg { position: absolute; inset: 0; height: 100%; }
}

/* ============================================================================
   PÁGINA DE PRODUTO — armazenamento e abas de condição
   ========================================================================== */

.opcao-titulo {
    margin: 0 0 12px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}

/* Cards de capacidade: eram cards de "outro modelo", com título e descrição.
   Agora é só a capacidade, então ficam compactos e em linha. */
.model-selection { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }

.capacidade-card {
    position: relative;
    flex: 0 0 auto;
    min-width: 96px;
    padding: 14px 18px !important;
    border: 1px solid rgba(26, 26, 26, 0.16) !important;
    border-radius: 12px;
    background: transparent !important;
    cursor: pointer;
    text-align: center;
    transition: border-color 0.25s ease, background 0.25s ease;
}
.capacidade-card h3 { margin: 0; font-size: 15px; font-weight: 600; color: var(--text-primary); }
.capacidade-card .model-icon { display: none; }
.capacidade-card:hover { border-color: rgba(26, 26, 26, 0.4) !important; }
.capacidade-card.selected {
    border-color: var(--text-primary) !important;
    border-width: 2px !important;
    background: rgba(26, 26, 26, 0.04) !important;
}

/* --- Abas Novos / Seminovos ------------------------------------------------ */

.cond-tabs {
    display: none;          /* o JS só mostra se houver os dois tipos */
    gap: 8px;
    margin: 4px 0 26px;
}
.cond-tab {
    padding: 9px 20px;
    border: 1px solid rgba(26, 26, 26, 0.16);
    border-radius: 50px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.25s ease;
}
.cond-tab:hover { border-color: rgba(26, 26, 26, 0.4); color: var(--text-primary); }
.cond-tab.ativa {
    background: #1A1A1A;
    border-color: #1A1A1A;
    color: #FFFFFF;
    font-weight: 600;
}