/* ============================================================
   首页专属样式 — home.css
   来源：style.css + new.css 中仅在 Index/Index.cshtml 使用的样式
   计算规则：new.css 在 style.css 之后加载，同名选择器取 new.css 值
   已删除：ad-carousel、brand-grid/brand-item（未使用）
          testimonials/review-card/review-stars/review-meta（未使用）
          blog-grid/blog-card/blog-card-body/blog-meta/blog-read（未使用）
          product-badge/category-image（未使用）
          best-deal-section/cta-card/cta-image（未使用）
          section-subtitle（未使用）
   ============================================================ */

/* ============================================================
   1. 首页英雄区
   来源：new.css（唯一来源，首页专属）
   ============================================================ */
.hero-section {
    background: linear-gradient(135deg, var(--dark-color) 0%, #2d3a4a 100%);
    padding: 4rem 0;
    position: relative;
    overflow: hidden;
}

.hero-content { color: white; }

.hero-content h1 {
    font-size: 3rem;
    font-weight: 800;
    margin-bottom: 1.5rem;
}

.hero-content p {
    font-size: 1.125rem;
    margin-bottom: 2rem;
    opacity: 0.9;
}

.hero-image { position: relative; }

.hero-image img {
    width: 100%;
    max-width: 500px;
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}

.btn-primary-custom {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    padding: 0.75rem 2rem;
    font-weight: 600;
    border-radius: 50px;
}

.btn-primary-custom:hover {
    background-color: #e55a2b;
    border-color: #e55a2b;
}

.btn-outline-light-custom {
    border: 2px solid white;
    padding: 0.75rem 2rem;
    font-weight: 600;
    border-radius: 50px;
}

.btn-outline-light-custom:hover {
    background-color: white;
    color: var(--dark-color);
}

.banner-card {
    background: white;
    border-radius: 15px;
    padding: 2rem;
    margin-bottom: 1rem;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
}

.banner-card img {
    width: 100%;
    border-radius: 10px;
    margin-bottom: 1rem;
}

.banner-card h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.banner-card p {
    color: #6c757d;
    margin-bottom: 1rem;
}

/* ============================================================
   2. 广告位
   来源：style.css（唯一来源）
   ============================================================ */
.advertisement-container {
    padding: 0 4rem 3rem;
    background: linear-gradient(135deg, #004e89 0%, #0066b2 100%);
}

/* ============================================================
   2. 首页服务区
   来源：new.css（唯一来源，首页专属）
   ============================================================ */
.products-section {
    padding: 4rem 0;
}

.services-section {
    padding: 3rem 0;
    background-color: white;
}

.service-card {
    text-align: center;
    padding: 2rem;
    border-radius: 0px;
    background: var(--light-bg);
    height: 100%;
    transition: all 0.3s ease;
    cursor: pointer;
}

.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.service-icon {
    font-size: 3rem;
    color: var(--primary-color);
    margin-bottom: 1rem;
}

.service-card h5 {
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.service-card p {
    color: #6c757d;
    margin: 0;
}

/* ============================================================
   3. 分类区域
   实际渲染取 new.css（style.css 被覆盖）
   .categories-section: new.css padding:4rem 0; background:var(--light-bg)
   .category-card: new.css border-radius:0px; overflow:hidden; hover 黄色背景
   .category-icon-wrapper: new.css w/h:100px，补入 style.css 的 flex 居中
   ============================================================ */
.categories-section {
    padding: 4rem 0;
    background-color: var(--light-bg);
}

.categories-row {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}

.categories-row > div {
    flex: 0 0 calc(12.5% - 1rem);
    max-width: calc(12.5% - 1rem);
}

/* --- 分类卡片（new.css 实际渲染版本）--- */
.category-card {
    text-align: center;
    padding: 0 0 12px;
    background: white;
    border-radius: 0px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06); /* style.css 保留，new.css 未覆盖 */
    transition: all 0.3s ease;
    height: 100%;
    overflow: hidden;
    cursor: pointer;
}

.category-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
    background: #ffc928;
}

.category-card:hover h6 {
    color: #fff;
}

.category-card.select {
    transform: translateY(0px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
    background: #ffc928;
}

.category-card.select h6 {
    color: #fff;
}

/* --- 分类图标容器
   new.css: w/h:100px; transition
   style.css: w/h:70px; display:flex; align-items:center; justify-content:center
   计算实际：尺寸取 new.css（100px），flex 居中从 style.css 补入
   （style.css 的 flex 属性被 new.css 覆盖导致图标不能居中，需补回）--- */
.category-icon-wrapper {
    width: 100px;                     /* 实际渲染：new.css 覆盖 style.css:70px */
    height: 100px;                    /* 实际渲染：new.css 覆盖 style.css:70px */
    margin: 0 auto 0;                /* 实际渲染：new.css 覆盖 style.css: 0 auto 1rem */
    transition: transform 0.3s ease; /* 实际渲染：new.css 独有 */
    /* 以下 flex 居中从 style.css 补入，new.css 缺失此属性 */
    display: flex;
    align-items: center;
    justify-content: center;
}

.category-icon-wrapper svg {
    width: 100%;
    height: 100%;
}

.category-card:hover .category-icon-wrapper {
    transform: scale(1.1);
}

.category-card h6 {
    font-weight: 600;                /* new.css 与 style.css 均为 600 */
    color: var(--dark-color);        /* 实际渲染：new.css，原 style.css:#1f2937 同色系 */
    font-size: 0.9rem;               /* 实际渲染：new.css，原 style.css:0.85rem */
    margin: 0;
    line-height: 1.3;                /* 实际渲染：style.css 保留，new.css 未覆盖 */
}

/* ============================================================
   4. 热销区
   来源：style.css（唯一来源）
   ============================================================ */
.best-sellers-layout {
    margin-top: 14px;
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 30px;
    align-items: stretch;
}

.best-sellers-ad {
    background: linear-gradient(180deg, #ff6a4f, #e43f22);
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100%;
    overflow: hidden;
    max-height: 686px;
}

.best-sellers-ad h4 {
    font-size: 24px;
    margin: 0 0 10px;
    font-weight: 800;
}

.best-sellers-ad p {
    font-size: 13px;
    margin: 0px;
    opacity: .95;
}

.best-sellers-ad p img {
    width: 300px;
    height: 686px;
}

.best-sellers-ad .ad-btn {
    display: inline-block;
    background: #ffcf38;
    color: #8a2d13;
    font-weight: 700;
    font-size: 13px;
    text-decoration: none;
    padding: 7px 12px;
}

.best-sellers-ad img {
    width: 100%;
    object-fit: cover;
}

.best-sellers-grid {
    margin-top: 0;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}

/* ============================================================
   5. 自定义标签页
   来源：new.css（首页 .custom-tabs 使用）
   .nav-link 也用于 Bootstrap tabs 但 new.css 版本更具体
   ============================================================ */
.custom-tabs {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 2rem;
    border-bottom: 2px solid #e0e0e0;
}

.custom-tabs .nav-link {
    border: none;
    padding: 1rem 2rem;
    font-weight: 600;
    color: #6c757d !important;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
}

.custom-tabs .nav-link.active {
    color: var(--primary-color) !important;
    border-bottom-color: var(--primary-color);
}

.nav-link {
    font-weight: 500;
    color: var(--dark-color) !important;
    margin: 0 0.5rem;
}

.nav-link:hover {
    color: var(--primary-color) !important;
}

/* ============================================================
   6. 优惠卡片 & CTA
   来源：new.css（首页专属）
   ============================================================ */
.deal-card {
    border-radius: 0px;
    padding: 0px;
    backdrop-filter: blur(10px);
    text-align: center;
    cursor: pointer;
    overflow: hidden;
}

.deal-card img {
    width: 100%;
    max-width: 600px;
    margin-bottom: 0px;
}

.cta-section {
    padding: 4rem 0;
    background: var(--light-bg);
}

/* ============================================================
   响应式适配
   按四档断点：≥1200px / ≥992px / ≥768px / <768px
   ============================================================ */

/* ≥1200px (大屏补充) */
@media (min-width: 1200px) {
}

/* ≥992px (桌面补充) */
@media (min-width: 992px) {
}

/* ≤991px (平板端)
   原 new.css max-width:991.98px
   ============================================================ */
@media (max-width: 991.98px) {
    .hero-content h1 { font-size: 2rem; }
    .hero-section { padding: 2rem 0; }
}

/* <768px (移动端)
   原 new.css max-width:767.98px + max-width:575.98px
   ============================================================ */
@media (max-width: 767.98px) {
    .hero-content { text-align: center; padding: 1rem; }
    .hero-content h1 { font-size: 1.75rem; }
    .hero-buttons { flex-direction: column; gap: 1rem; }
    .hero-buttons .btn { width: 100%; }
    .banner-card { margin-bottom: 1rem; }
    .service-card { margin-bottom: 1rem; }
    .custom-tabs { flex-direction: column; gap: 0; align-items: stretch; }
    .custom-tabs .nav-link { padding: 0.75rem 1rem; }
    .newsletter-form { flex-direction: column; }
    .deal-card { padding: 2rem 1rem; }
}

/* ≤575px (小屏手机)
   原 new.css max-width:575.98px
   ============================================================ */
@media (max-width: 575.98px) {
    .product-image { height: 200px; }
    .footer { padding: 2rem 0 4rem; }
}

/* ============================================================
   7. 视频展示区
   ============================================================ */

/* --- 视频展示容器 --- */
.video-showcase {
    display: flex;
    gap: 20px;
    margin: 0 auto;
    /*max-width: 1200px;*/
    align-items: center;
}

/* --- 单张视频卡片 --- */
.video-card {
    flex: 1;
    position: relative;
    border-radius: 0px;
    overflow: hidden;
    cursor: pointer;
}

/* --- 封面图 --- */
.video-card img {
    width: 100%;
    /* --- aspect-ratio: 16 / 9 --- */
    object-fit: fill;
    display: block;
}

/* --- 播放按钮 --- */
.video-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 2rem;
    transition: transform 0.25s, background 0.25s, box-shadow 0.25s;
    pointer-events: none; /* 点击事件由父容器处理 */
}

.video-card:hover .video-play-btn {
    transform: translate(-50%, -50%) scale(1.1);
    background: rgba(0, 0, 0, 0.7);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
}

/* --- 全屏弹出遮罩 --- */
.video-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.85);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- 弹出层中的视频 --- */
.video-overlay video {
    max-width: 90vw;
    max-height: 80vh;
    border-radius: 6px;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.6);
}

/* --- 关闭按钮 --- */
.video-overlay .close-btn {
    position: absolute;
    top: 20px;
    right: 28px;
    font-size: 2.2rem;
    color: #fff;
    cursor: pointer;
    z-index: 10001;
    background: none;
    border: none;
    line-height: 1;
}

.video-overlay .close-btn:hover {
    opacity: 0.7;
}

/* --- 移动端适配：纵向堆叠 --- */
@media (max-width: 767.98px) {
    .video-showcase {
        flex-direction: column;
    }
}