@font-face {
    font-family: 'Samsung Sharp Sans';
    font-style: normal;
    font-weight: 400;
    src: url('font/samsung-sharp-sans/samsungsharpsans.woff') format('woff');
}

@font-face {
    font-family: 'Samsung Sharp Sans';
    font-style: normal;
    font-weight: 500;
    src: url('font/samsung-sharp-sans/samsungsharpsans-medium.woff') format('woff');
}

@font-face {
    font-family: 'Samsung Sharp Sans';
    font-style: normal;
    font-weight: 700;
    src: url('font/samsung-sharp-sans/samsungsharpsans-bold.woff') format('woff');
}

@font-face {
    font-family: 'SamsungOne';
    font-style: normal;
    font-weight: 400;
    src: url('font/samsungone/SamsungOne-400.woff') format('woff');
}

@font-face {
    font-family: 'SamsungOne';
    font-style: normal;
    font-weight: 700;
    src: url('font/samsungone/SamsungOne-700.woff') format('woff');
}

:root {
    --bg-color: #ffffff;
    --card-bg: #f7f7f7;
    --text-color: #000000;
    --accent-color: #000000;
    --font-family: 'SamsungOne', sans-serif;
}

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

h1,
h2,
h3,
h4,
h5,
h6,
.section-title,
.hero h1,
.banner-text h3 {
    font-family: 'Samsung Sharp Sans', sans-serif;
}

body {
    font-family: var(--font-family);
    background-color: var(--bg-color);
    color: var(--text-color);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

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

a {
    text-decoration: none;
    color: inherit;
    transition: color 0.3s;
}

.container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0;
}

/* Header Removed */


/* Hero */
.hero {
    position: relative;
    text-align: center;
    color: white;
    /* Assuming dark hero image */
}

.hero-content {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    width: 90%;
}

.hero h1 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.hero p {
    font-size: 1rem;
    margin-bottom: 1.5rem;
}

.btn {
    display: inline-block;
    padding: 12px 32px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-primary {
    background-color: white;
    color: black;
}

.btn-primary:hover {
    background-color: #ddd;
}

.btn-outline {
    background-color: #000;
    /*border: 1px solid white;*/
    color: white;
    margin-top: 8px;
}

/*.btn-outline:hover {*/
/*    background-color: white;*/
/*    color: black;*/
/*}*/

.btn-buy {
    background-color: black;
    color: white;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s ease;
}

/* Sections */
.section {
    padding: 24px 0;
}

.section-title {
    text-align: center;
    font-size: 2rem;
    margin-bottom: 40px;
    font-weight: 700;
}

/* Novidades Navigation (Thumbs) */
.nav-thumbs {
    margin-bottom: 40px !important;
    border-bottom: 1px solid transparent;
    /* Optional separator */
}

.nav-thumbs .swiper-wrapper {
    /* Default to flex-start for scrollable areas on mobile */
    justify-content: flex-start;
}

@media (min-width: 1024px) {
    .nav-thumbs .swiper-wrapper {
        justify-content: center;
    }
}

.nav-item {
    width: auto !important;
    /* Auto width based on text */
    margin: 0 15px;
    padding: 10px 0;
    font-weight: 600;
    font-size: 1.2rem;
    color: #000;
    cursor: pointer;
    position: relative;
    transition: all 0.3s;
    text-align: center;
}

.nav-item:hover {
    color: black;
}

/* Active State for Thumbs */
.nav-item.swiper-slide-thumb-active {
    color: black;
}

.nav-item.swiper-slide-thumb-active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: black;
}



/* Product Info inside Card */
.product-info {
    text-align: center;
    padding-top: 16px;
}

.product-info h3 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 8px;
}

.product-info .price {
    font-size: 0.9rem;
    color: #555;
}

/* Adding box-shadow on hover for cards */
.product-card {
    flex-direction: column;
    /* Ensure vertical stack: Image -> Info */
    padding: 20px;
}

/* Product Cards */
.product-card {
    background-color: var(--card-bg);
    border-radius: 18px;
    overflow: hidden;
    position: relative;
    /* Aspect ratio mainly controlled by padding or image */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: transform 0.3s ease;
    cursor: pointer;
}

/* Minimalist: No text initially */
.product-image-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    overflow: hidden;
    /* Ensure zoom stays within bounds if needed, usually wrapper constrains it */
}

.product-image-wrapper img {
    transition: transform 0.5s ease;
    width: 100%;
    /* Ensure responsive width */
    height: 100%;
    object-fit: cover;
    display: block;
}

.product-card:hover .product-image-wrapper img {
    transform: scale(1.1);
}

.hover-overlay {
    position: absolute;
    bottom: -20px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    opacity: 0;
    /* Hidden by default */
    transition: all 0.3s ease;
}

/* Hover Effects */
.product-card:hover .hover-overlay {
    opacity: 1;
    bottom: 0;
    /* Align with where text was, or simplified */
}

.product-name-overlay {
    position: absolute;
    bottom: 20px;
    /* left: 20px; */
    z-index: 5;
    pointer-events: none;
    /* Let clicks pass through to the card/link if needed */
    transition: all 0.3s ease;
    padding: 0 8px;
}

/* Move name up when hover occurs to make room for button if needed, 
   or just keep it there if button is transparent/small. 
   Let's move it up slightly to be safe and dynamic. */
.product-card:hover .product-name-overlay {
    transform: translateY(-50px);
    /* Increased spacing to prevent overlap with button */
}

.product-name-overlay h3 {
    font-size: 1rem;
    font-weight: 500;
    margin: 0;
    color: black;
    text-align: center;
}

/* Hide name when hover overlay (Add button) appears to prevent overlapping/clutter if desired, 
   OR keep it. User request implies they want it visible. 
   Checking collisions: Hover overlay comes from bottom: -20px to 0.
   Name is at bottom: 20px. They might overlap.
   Let's move the hover-overlay slightly higher or keep name static.
   
   Actually, user said "take into account the animation". 
   If the button comes up, maybe the name slides up too? 
   Or the button covers it? 
   Usually in Samsung/Premium sites, the button appears and name stays or moves.
   Let's ensure the hover overlay (button) has higher z-index (10) vs text (5).
   And let's make the button overlay background white/transparent? 
   No, it's just a button in the current CSS.
   
   Let's adjust .hover-overlay to be sure it doesn't conflict visually.
*/

.product-card:hover .btn-buy {
    opacity: 1;
    transform: translateY(-10px);
}

/* Desktop only hover, touch devices just show it or tap */
@media (hover: hover) {
    /* Keep hover logic */
}

/* Promo Banners */
.promo-banner {
    position: relative;
    margin: 0 auto;
}

.banner-img {
    width: 100%;
    height: auto;
    border-radius: 0;
}

.promo-banner .container {
    position: relative;
}

.banner-text {
    position: absolute;
    top: 32px;
    /* Espaçamento entre o topo da imagem e o texto */
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    color: white;
    z-index: 10;
    width: 90%;
}

.banner-text h3 {
    font-size: 2.5rem;
    margin-bottom: 8px;
    font-weight: 700;
}

.banner-text p {
    font-size: 1.5rem;
    opacity: 0.9;
}

/* Utility to toggle images */
.mobile-only {
    display: block;
}

.desktop-only {
    display: none;
}

/* Footer */
.footer {
    padding: 40px 0;
    border-top: 1px solid #eee;
    text-align: center;
    font-size: 0.8rem;
    color: #888;
}

/* Responsive Styles */
@media (min-width: 768px) {
  
    .mobile-only {
        display: none;
    }

    .desktop-only {
        display: block;
    }

    .hero h1 {
        font-size: 4rem;
    }

    .promo-banner .container {
        padding: 0;
    }

    .banner-img {
        border-radius: 0;
        /* No radius on desktop banners */
    }

    .banner-text {
        left: 80px;
        top: 50%;
        transform: translateY(-50%);
        text-align: left;
        width: auto;
    }
}

@media (max-width: 767px) {
    .banner-text {
        top: 7%;
        bottom: 32px;
    }
    
    .btn-outline {
        margin-top: 0 !important;
    }

    .banner-text h3{
        font-size: 1.5rem;
    }

    .banner-text p{
        font-size: 1rem;
    }
    

    .swiper{
        margin-left: 15px;
    }

    .banner-swiper{
        margin-left: 0;
    }
}

/* Mobile Nav Overlay Removed */

/* Banner Swiper - Custom Styles */
.banner-swiper {
    width: 100%;
    height: auto;
    /* Ensure bullets and arrows are visible */
    --swiper-navigation-color: #fff;
    --swiper-pagination-color: #fff;
}

.banner-swiper .swiper-button-next,
.banner-swiper .swiper-button-prev {
    /* Adjust size or position if needed, default is usually okay */
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    display: none;
    /* Hidden by default on mobile */
}

/* Show arrows on desktop */
@media (min-width: 768px) {

    .banner-swiper .swiper-button-next,
    .banner-swiper .swiper-button-prev {
        display: flex;
    }
}

.banner-swiper .swiper-pagination-bullet {
    background: rgba(255, 255, 255, 0.7);
    opacity: 0.5;
}

.banner-swiper .swiper-pagination-bullet-active {
    background: #fff;
    opacity: 1;
}