/* Banner */
.banner{
    height:600px;
    position:relative;
    overflow:hidden;
}
.banner-slide{
    position:absolute;
    inset:0;
    opacity:0;
    transition:opacity 0.6s ease;
    background-size:cover;
    background-position:center center;
}
.banner-slide.active{opacity:1;z-index:2;}
.slide-overlay{
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.4);
    display:flex;
    align-items:center;
}
.slide-content h1{
    font-size:clamp(2rem,5vw,3.5rem);
    color:#fff;
    margin-bottom:16px;
}
.slide-content p{
    font-size:18px;
    color:#fff;
    margin-bottom:28px;
    max-width:600px;
}
.banner-arrow{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:44px;
    height:44px;
    background:rgba(255,255,255,0.3);
    border:none;
    color:#fff;
    font-size:20px;
    cursor:pointer;
    z-index:5;
}
.banner-arrow:hover{background:rgba(255,255,255,0.6);}
.prev-arrow{left:20px;}
.next-arrow{right:20px;}
.banner-dots{
    position:absolute;
    bottom:30px;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    gap:10px;
    z-index:5;
}
.dot{
    width:12px;
    height:12px;
    border-radius:50%;
    background:#fff;
    opacity:0.5;
    cursor:pointer;
}
.dot.active{opacity:1;}

/* Category */
.category-row{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
}
.category-card{
    border:1px solid var(--border);
    overflow:hidden;
    transition:0.3s;
    background:#fff;
}
.category-card:hover{box-shadow:0 6px 18px rgba(0,0,0,0.1);}
.category-img{
    width:100%;
    aspect-ratio: 4/3;
    object-fit:cover;
    transition:0.5s;
}
.category-card:hover .category-img{transform:scale(1.05);}
.category-info{padding:20px;}
.category-info h3{margin-bottom:8px;}
.category-info p{color:#666;margin-bottom:16px;}
.category-info a{color:var(--accent);font-weight:500;}

/* Hot Scroll */
.hot-scroll-wrap{overflow:hidden;}
.hot-scroll-inner{
    display:flex;
    gap:20px;
    animation:scrollLoop 22s linear infinite;
}
.hot-scroll-wrap:hover .hot-scroll-inner{animation-play-state:paused;}
@keyframes scrollLoop{
    0%{transform:translateX(0);}
    100%{transform:translateX(-50%);}
}
.hot-card{
    min-width:260px;
    background:#fff;
    border:1px solid var(--border);
    overflow:hidden;
}
.hot-img{
    width:100%;
    object-fit:cover;
}
.hot-info{padding:16px;}
.hot-price{color:var(--accent);font-weight:bold;margin-top:8px;}

/* About */
.about-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:40px;
    align-items:center;
}
.about-img{width:100%;}
.about-text p{color:#eee;margin-bottom:16px;}
.about-text h2{color:#fff;font-size:32px;margin-bottom:20px;}

/* Craft */
    /* 板块外层 + 背景蒙版，背景图移到html内联 */
        .gallery-section{
            position: relative;
            padding:80px 0;
            overflow:hidden;
        }
        .gallery-bg{
            position:absolute;
            inset:0;
            background-size:cover;
            background-position:center;
        }
        .gallery-bg::after{
            content:"";
            position:absolute;
            inset:0;
            background-color:rgba(10, 43, 112, 0.72);
        }
        .gallery-section .container{
            position:relative;
            z-index:2;
        }
        .gallery-section .section-title h2,
        .gallery-section .section-title p{
            color:#ffffff;
        }

        /* Grid 8列网格 */
        .gallery-grid{
            display:grid;
            grid-template-columns: repeat(8, 1fr);
            grid-auto-rows: 200px;
            gap:16px;
        }
        .gallery-item{
            position:relative;
            overflow:hidden;
            border-radius:0;
        }
        .gallery-item img{
            width:100%;
            height:100%;
            object-fit:cover;
            display:block;
            transition: transform 0.4s ease;
        }
        .gallery-item:hover img{
            transform:scale(1.05);
        }
        .gallery-caption{
            position:absolute;
            left:0;
            bottom:0;
            width:100%;
            padding:12px 16px;
            background:linear-gradient(to top, rgba(0,0,0,0.75),transparent);
            color:#fff;
            font-size:15px;
        }

        /*
        ┌──────────────┬──────┬──────┐
        │              │方块1 │方块2 │
        │   左大图     ├──────────────┤
        │              │   右下横图   │
        └──────────────┴──────────────┘
        */
        .item-left-big{
            grid-column: span 4;
            grid-row: span 2;
        }
        .item-top-sm-1{
            grid-column: span 2;
            grid-row: span 1;
        }
        .item-top-sm-2{
            grid-column: span 2;
            grid-row: span 1;
        }
        .item-bottom-wide{
            grid-column: span 4;
            grid-row: span 1;
        }

        /* 移动端 */
        @media(max-width:768px){
            .gallery-grid{
                grid-template-columns: 1fr;
                grid-auto-rows: 220px;
            }
            .item-left-big,
            .item-top-sm-1,
            .item-top-sm-2,
            .item-bottom-wide{
                grid-column: span 1;
                grid-row: span 1;
            }
        }

/* Why Us */
.why-row{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:24px;
}
.why-card{
    background:#fff;
    padding:28px 20px;
    text-align:center;
    transition:0.3s;
}
.why-card:hover{box-shadow:0 5px 16px rgba(0,0,0,0.08);}
.why-card i{font-size:40px;color:var(--accent);margin-bottom:16px;}

/* Review */
.review-row{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
}
.review-card{
    background:#fff;
    border:1px solid var(--border);
    padding:24px;
}
.stars{color:var(--accent);margin-bottom:16px;}

/* News */
.news-row{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
}
.news-card{
    border:1px solid var(--border);
    overflow:hidden;
    background:#fff;
}
.news-img{width:100%;height:190px;object-fit:cover;}
.news-body{padding:20px;}
.news-date{font-size:13px;color:#999;}

/* FAQ */
.faq-wrap{max-width:800px;margin:0 auto;}
.faq-item{
    background:#fff;
    border:1px solid var(--border);
    margin-bottom:12px;
}
.faq-q{
    width:100%;
    border:0;
    background:transparent;
    padding:18px 20px;
    text-align:left;
    font-size:16px;
    display:flex;
    justify-content:space-between;
    cursor:pointer;
}
.faq-a{
    padding:0 20px 20px;
    display:none;
    color:#555;
}
.faq-a.open{display:block;}


/* Responsive */
@media (max-width:992px){
    .main-nav{display:none;}
    .mobile-menu-btn{display:block;}
    .category-row,.review-row,.news-row{grid-template-columns:repeat(2,1fr);}
    .why-row,.footer-row{grid-template-columns:repeat(2,1fr);}
    .craft-row{grid-template-columns:repeat(2,1fr);}
    .about-row{grid-template-columns:1fr;}
    .mega-menu{width:calc(100vw - 30px);}
}
@media (max-width:576px){
    .category-row,.why-row,.craft-row,.review-row,.news-row,.footer-row{grid-template-columns:1fr;}
    .banner{height:400px;}
}