/* =====================================================
           GLOBAL RESET
        ===================================================== */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html, body {
            width: 100%;
            margin: 0;
            padding: 0;
            overflow-x: hidden;
            font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: #ffffff;
            color: #333;
            -webkit-font-smoothing: antialiased;
        }

        a {
            text-decoration: none;
        }

        /* =====================================================
           SECTION 1: HERO
        ===================================================== */
        .home-page {
            position: relative;
            width: 100%;
            height: 100vh;
            min-height: 700px;
            background: #ffffff;
        }

        .site-header {
            position: relative;
            top: auto;
            left: auto;
            width: 100%;
            min-height: 96px;
            display: flex !important;
            justify-content: space-between;
            align-items: center;
            gap: 30px;
            padding: 25px 8%;
            background: #ffffff;
            z-index: 1000;
            font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        .page-home .site-header { position: absolute; top: 0; left: 0; width: 100%; background: transparent; }

        .logo-area { display: flex !important; align-items: center; gap: 12px; color: #0d4d3a; flex-shrink: 0; }
        .logo-icon { width: 32px; height: 32px; min-width: 32px; background: #0d4d3a; border-radius: 50%; display: flex !important; align-items: center; justify-content: center; color: #fff; font-weight: bold; line-height: 1; }
        .logo-text { color: #0d4d3a; font-size: 16px; font-weight: 700; line-height: 1.1; letter-spacing: .5px; }
        .logo-text span { display: block; font-size: 11px; font-weight: 500; color: #666; }

        .site-header nav { display: block !important; margin: 0 auto; }
        .site-header nav ul { display: flex !important; align-items: center; list-style: none; gap: 35px; margin: 0; padding: 0; }
        .site-header nav ul li { display: block; margin: 0; padding: 0; list-style: none; }
        .site-header nav ul li a { display: inline-block; color: #333; font-size: 15px; font-weight: 500; line-height: 1.4; white-space: nowrap; transition: .3s; text-decoration: none; }
        .site-header nav ul li a:hover, .site-header nav ul li a.active { color: #0d4d3a; border-bottom: 2px solid #20b2aa; padding-bottom: 4px; }
        .btn-appointment { display: inline-flex !important; align-items: center; justify-content: center; background: #0d4d3a; color: #fff !important; padding: 12px 24px; border-radius: 8px; font-size: 14px; font-weight: 600; white-space: nowrap; text-decoration: none; flex-shrink: 0; }

        .hero-container { position: relative; width: 100%; height: 100%; display: flex; justify-content: flex-end; }
        .hero-right { width: 50%; height: 100%; position: relative; overflow: hidden; z-index: 1; }
        .portrait-video { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
        
        .hero-text-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding-left: 8%; display: flex; flex-direction: column; justify-content: center; z-index: 10; pointer-events: none; }
        .interactive-title-box { cursor: pointer; display: inline-block; transition: .2s; pointer-events: auto; }
        .interactive-title-box:hover { transform: scale(1.02); }
        .hero-title-light { font-size: 3vw; font-weight: 500; color: #20b2aa; text-transform: uppercase; letter-spacing: 3px; margin-bottom: 3vw; }
        .hero-title-bold { font-size: 1.5vw; font-weight: 600; color: #0d4d3a; line-height: .9; text-transform: uppercase; }

        /* =====================================================
           SECTION 2: WHY CHOOSE US (Full Screen Update)
        ===================================================== */
        .section-why-choose {
            background-color: #03241c;
            padding: 80px 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh; /* 满屏高度 */
        }

        .features-card-container {
            background: linear-gradient(135deg, #053b2e 0%, #03241c 100%);
            width: 100%;
            max-width: 1680px;
            border-radius: 24px;
            padding: 60px 8%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 60px;
            box-shadow: 0 20px 40px rgba(3, 36, 28, 0.15);
        }

        .content-left { flex: 1; max-width: 460px; }
        .wcu-subtitle { color: #20b2aa; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 20px; }
        .wcu-main-title { color: #ffffff; font-size: 48px; font-weight: 800; line-height: 1.1; margin-bottom: 24px; letter-spacing: -0.5px; }
        .wcu-description { color: #b3cfc8; font-size: 15px; line-height: 1.6; margin-bottom: 35px; }

        .btn-learn-more { display: inline-flex; align-items: center; gap: 10px; background-color: #12725b; color: #ffffff; padding: 14px 28px; border-radius: 12px; font-size: 14px; font-weight: 600; transition: background 0.3s, transform 0.2s; }
        .btn-learn-more:hover { background-color: #189879; transform: translateY(-2px); }
        .btn-learn-more svg { transition: transform 0.3s ease; }
        .btn-learn-more:hover svg { transform: translateX(4px); }

        .stats-grid { flex: 1.2; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
        .stat-item { text-align: center; display: flex; flex-direction: column; align-items: center; }
        .icon-box { width: 48px; height: 48px; border: 1px solid rgba(32, 178, 170, 0.3); border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 25px; background-color: rgba(32, 178, 170, 0.05); }
        .icon-box svg { width: 22px; height: 22px; stroke: #20b2aa; stroke-width: 2; fill: none; }
        .stat-number { color: #ffffff; font-size: 42px; font-weight: 800; margin-bottom: 12px; letter-spacing: -1px; }
        .stat-label { color: #b3cfc8; font-size: 12px; font-weight: 600; line-height: 1.4; max-width: 90px; }

        /* =====================================================
           SECTION 3: SMILE INNOVATION (Full Screen Update)
        ===================================================== */
        .section-innovation {
            background-color: #ffffff;
            padding: 80px 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 100vh; /* 满屏高度 */
        }

        .innovation-container {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 1fr;
            gap: 40px;
            align-items: center;
        }

        @media (min-width: 992px) { .innovation-container { grid-template-columns: 1.1fr 0.9fr; gap: 60px; } }

        .innovation-content { display: flex; flex-direction: column; }
        .inno-main-title { color: #063d27; font-size: 42px; font-weight: 700; margin-bottom: 20px; letter-spacing: -0.5px; }
        .inno-subtitle { color: #4a5568; font-size: 16px; line-height: 1.6; margin-bottom: 35px; }

        .card-radio { display: none; }
        .inno-card { border: 1px solid #e2e8f0; border-radius: 12px; padding: 24px; margin-bottom: 16px; display: flex; gap: 20px; background: #ffffff; cursor: pointer; transition: all 0.2s ease-in-out; user-select: none; }
        .inno-card:hover { border-color: #cbd5e1; background-color: #f8fafc; }
        .card-radio:checked + .inno-card { border: 2px solid #0a6640 !important; background-color: #ffffff !important; box-shadow: 0 4px 12px rgba(10, 102, 64, 0.08) !important; }

        .inno-icon-container { flex-shrink: 0; width: 48px; height: 48px; border: 1px solid #e2e8f0; border-radius: 8px; display: flex; align-items: center; justify-content: center; background-color: #ffffff; transition: all 0.2s ease; }
        .card-radio:checked + .inno-card .inno-icon-container { border-color: transparent !important; background-color: #0a6640 !important; }
        .inno-icon-container svg { width: 24px; height: 24px; fill: none; stroke: #0a6640; stroke-width: 2; transition: stroke 0.2s; }
        .card-radio:checked + .inno-card .inno-icon-container svg { stroke: #ffffff !important; }

        .inno-card-text { display: flex; flex-direction: column; gap: 6px; }
        .inno-card-title { color: #1a202c; font-size: 18px; font-weight: 600; }
        .inno-card-desc { color: #718096; font-size: 14px; line-height: 1.5; }

        .image-section { position: relative; width: 100%; }
        .main-img-placeholder { width: 100%; aspect-ratio: 4 / 3; border-radius: 24px; background: linear-gradient(135deg, #e6f4ea 0%, #c2e7d9 100%); box-shadow: 0 10px 30px rgba(0,0,0,0.05); position: relative; overflow: hidden; }
        .main-img-placeholder::before { content: ''; position: absolute; width: 150%; height: 150%; border: 2px solid rgba(255,255,255,0.4); border-radius: 40%; top: -20%; left: -10%; transform: rotate(45deg); }
        .floating-badge { position: absolute; left: 8%; bottom: 8%; width: 160px; height: 160px; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(5px); border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 20px; box-shadow: 0 8px 24px rgba(0,0,0,0.08); z-index: 10; }
        .badge-icon { margin-bottom: 8px; }
        .badge-icon svg { width: 20px; height: 20px; stroke: #0a6640; stroke-width: 2; fill: none; }
        .badge-text { color: #063d27; font-size: 13px; font-weight: 600; line-height: 1.4; }

        /* =====================================================
           SECTION 4: PATIENT STORIES
        ===================================================== */
        .section-patients { background: #fafbfa; padding: 70px 40px; display: flex; justify-content: center; }
        .patient-wrapper { width: 100%; max-width: 1500px; margin: 0 auto; }
        .patient-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 45px; }
        .title-area { display: flex; flex-direction: column; gap: 12px; }
        .badge-tag { display: inline-flex; align-items: center; width: fit-content; background: #e6f4ea; color: #0a6640; font-size: 12px; font-weight: 700; letter-spacing: 1.5px; padding: 7px 15px; border-radius: 30px; text-transform: uppercase; }
        .badge-tag::first-letter { color: #20b2aa; }
        .patients-main-heading { color: #063d27; font-size: 44px; font-weight: 700; line-height: 1.15; letter-spacing: -1px; }

        .nav-buttons { display: flex; gap: 12px; }
        .btn-arrow { width: 46px; height: 46px; border: 1px solid #dfe7e2; border-radius: 50%; background: #ffffff; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.25s ease; }
        .btn-arrow:hover { background: #0a6640; border-color: #0a6640; transform: translateY(-2px); }
        .btn-arrow svg { width: 19px; height: 19px; fill: none; stroke: #2d3748; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: stroke 0.25s ease; }
        .btn-arrow:hover svg { stroke: #ffffff; }

        .stories-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
        .story-card { background: #ffffff; border: 1px solid #e5ece8; border-radius: 22px; padding: 25px; min-height: 540px; display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 8px 25px rgba(6, 61, 39, 0.04); transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; overflow: hidden; }
        .story-card:hover { transform: translateY(-8px); border-color: #cde3d8; box-shadow: 0 18px 40px rgba(6, 61, 39, 0.10); }
        
        .patient-photo { width: 100%; height: 230px; border-radius: 16px; background: linear-gradient(135deg, #e6f4ea 0%, #c2e7d9 100%); position: relative; overflow: hidden; margin-bottom: 25px; display: flex; align-items: center; justify-content: center; }
        .photo-placeholder { width: 90px; height: 90px; border-radius: 50%; border: 2px dashed rgba(10,102,64,0.35); display: flex; align-items: center; justify-content: center; color: #0a6640; font-size: 34px; background: rgba(255,255,255,0.45); z-index: 2; }
        
        .card-top { flex: 1; }
        .card-meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
        .quote-icon svg { width: 25px; height: 25px; fill: #0a6640; }
        .stars-row { display: flex; gap: 3px; }
        .stars-row svg { width: 15px; height: 15px; fill: #ffb800; }
        .review-text { color: #4a5568; font-size: 15px; line-height: 1.75; font-weight: 500; }
        
        .user-profile { display: flex; align-items: center; gap: 13px; border-top: 1px solid #edf2ef; padding-top: 20px; margin-top: 25px; }
        .avatar { width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #ffffff; font-size: 17px; font-weight: 700; }
        .user-info { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
        .user-name { color: #1a202c; font-size: 15px; font-weight: 700; }
        .project-pill { background: #f0fdf4; color: #0a6640; font-size: 10px; font-weight: 600; padding: 4px 10px; border-radius: 15px; border: 1px solid rgba(10,102,64,0.10); }
        
/* ===== Patient Stories 四个卡片修复 ===== */

.stories-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 24px !important;
    width: 100% !important;
    align-items: stretch !important;
}

.story-card {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

.card-top {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
}

.patient-photo {
    width: 100% !important;
    height: 240px !important;
    margin: 0 0 20px 0 !important;
    overflow: hidden !important;
    border-radius: 12px !important;
    flex-shrink: 0 !important;
}

.patient-photo img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: cover !important;
    object-position: center !important;
}

.photo-placeholder {
    display: none !important;
}

.card-meta {
    width: 100% !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    box-sizing: border-box !important;
}

.review-text {
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 20px 0 !important;
}

.user-profile {
    width: 100% !important;
    box-sizing: border-box !important;
    margin-top: auto !important;
    display: flex !important;
    align-items: center !important;
}


/* ===== 平板 ===== */

@media (max-width: 1000px) {
    .stories-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}


/* ===== 手机 ===== */

@media (max-width: 600px) {
    .stories-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .patient-photo {
        height: 220px !important;
    }
}
        /* =====================================================
           SECTION 5: FAQ
        ===================================================== */
        .section-faq {
            background: #0b2416;
            padding: 5rem 20px;
            display: flex;
            justify-content: center;
        }

        .faq-container {
            width: 70%;
            max-width: 850px;
            background: #113420;
            border-radius: 24px;
            box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
            padding: 2.5rem;
            transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
        }

        .faq-header { display: flex; align-items: center; justify-content: space-between; padding-bottom: 1.5rem; border-bottom: 1px solid rgba(0, 179, 104, 0.2); margin-bottom: 2rem; }
        .faq-title { font-size: 1.85rem; font-weight: 700; color: #eaf6ef; display: flex; align-items: center; gap: 0.6rem; }
        .faq-title::before { content: ''; display: inline-block; width: 5px; height: 24px; background: #00b368; border-radius: 3px; }
        .faq-subtitle { font-size: 0.9rem; color: #9cbda7; }

        .faq-item { margin-bottom: 1rem; background: #164229; border-radius: 14px; overflow: hidden; transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); }
        .faq-item:hover { background: #1b4e31; }
        details { width: 100%; }
        summary { list-style: none; display: flex; justify-content: space-between; align-items: center; padding: 1.3rem 1.5rem; font-weight: 600; font-size: 1.05rem; color: #eaf6ef; cursor: pointer; outline: none; user-select: none; }
        summary::-webkit-details-marker { display: none; }
        
        .faq-icon { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); flex-shrink: 0; margin-left: 1rem; }
        .faq-icon svg { fill: none; stroke: #00b368; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
        
        details[open] { background: #1b4e31; }
        details[open] summary { color: #00b368; }
        details[open] .faq-icon { transform: rotate(180deg); }
        .faq-content { padding: 0 1.5rem 1.5rem 1.5rem; color: #9cbda7; font-size: 0.95rem; line-height: 1.6; }

        /* =====================================================
           SECTION 6: FOOTER
        ===================================================== */
        .site-footer { background-color: #f9fbf9; padding: 4rem 2rem 2rem 2rem; width: 100%; }
        .footer-container { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 2.2fr 1fr 1.2fr 1.2fr 1.5fr; gap: 2rem; }
        
        .footer-brand { display: flex; flex-direction: column; gap: 1.2rem; padding-right: 2rem; }
        .ftr-logo-area { display: flex; align-items: center; gap: 0.75rem; }
        .ftr-logo-icon { width: 36px; height: 36px; background-color: #0a4d33; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
        .ftr-logo-icon::after { content: ''; width: 12px; height: 16px; border: 2px solid #ffffff; border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%; display: block; }
        .ftr-logo-text h2 { font-size: 1.15rem; font-weight: 800; letter-spacing: 0.05em; color: #0c2d20; line-height: 1.1; }
        .ftr-logo-text p { font-size: 0.65rem; font-weight: 600; letter-spacing: 0.1em; color: #2196f3; text-transform: uppercase; margin-top: 2px; }
        .brand-desc { font-size: 0.9rem; color: #3a5347; line-height: 1.5; max-width: 240px; }
        
        .social-links { display: flex; gap: 0.6rem; margin-top: 0.5rem; }
        .social-icon { width: 32px; height: 32px; background-color: #eaf1ed; border-radius: 50%; display: flex; align-items: center; justify-content: center; text-decoration: none; transition: background-color 0.2s; }
        .social-icon:hover { background-color: #d1e2da; }
        .social-icon svg { width: 14px; height: 14px; fill: #0c2d20; }
        
        .footer-column h3 { font-size: 0.95rem; font-weight: 700; color: #0c2d20; margin-bottom: 1.2rem; }
        .footer-links { list-style: none; }
        .footer-links li { margin-bottom: 0.75rem; }
        .footer-links a { font-size: 0.9rem; color: #3a5347; text-decoration: none; transition: color 0.2s; }
        .footer-links a:hover { color: #0a4d33; }
        
        .contact-list { list-style: none; }
        .contact-item { display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 0.9rem; font-size: 0.9rem; color: #3a5347; line-height: 1.4; }
        .contact-item svg { width: 16px; height: 16px; stroke: #3a5347; fill: none; stroke-width: 2; margin-top: 2px; flex-shrink: 0; }
        
        .footer-bottom { max-width: 1200px; margin: 3rem auto 0 auto; padding-top: 1.5rem; border-top: 1px solid #e5ede9; text-align: center; }
        .copyright { font-size: 0.85rem; color: #3a5347; }

        /* =====================================================
   INNER PAGES / SHARED HEADER
   ===================================================== */
.inner-page {
    width: 100%;
    padding-top: 0;
}

body:not(.page-home) .site-header {
    position: relative;
    min-height: 96px;
    background: #ffffff;
}

@media (max-width: 1024px) {
    body:not(.page-home) .site-header {
        padding: 20px 5%;
    }
}

/* =====================================================
           MEDIA QUERIES (Responsive Logic Combined)
        ===================================================== */
        @media (max-width: 1200px) {
            .patient-wrapper { padding: 60px 30px; }
            .stories-grid { grid-template-columns: repeat(2, 1fr); }
            .story-card { min-height: 500px; }
        }

        @media (max-width: 1024px) {
            .features-card-container { flex-direction: column; padding: 50px 40px; text-align: center; gap: 50px; }
            .content-left { max-width: 100%; }
            .btn-learn-more { margin-bottom: 10px; }
            .stats-grid { width: 100%; grid-template-columns: repeat(2, 1fr); gap: 40px 20px; }
            
            .page-home .site-header nav { display: none !important; }
            .innovation-container { grid-template-columns: 1fr; }
            
            .footer-container { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
            .footer-brand { grid-column: span 2; padding-right: 0; }
        }

        @media (max-width: 992px) {
            .faq-container { width: 85%; padding: 2rem; }
        }

        @media (max-width: 700px) {
            .home-page { min-height: 750px; }
            .site-header {
            position: relative; padding: 20px; }
            .btn-appointment { display: none; }
            .hero-right { width: 100%; }
            .hero-text-overlay { padding: 30px; justify-content: flex-end; padding-bottom: 60px; }
            .hero-title-light { font-size: 6vw; }
            .hero-title-bold { font-size: 14vw; }

            .patient-wrapper { padding: 45px 20px; }
            .patient-header { align-items: flex-start; gap: 25px; }
            .patients-main-heading { font-size: 34px; }
            .stories-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
            .story-card { min-height: 480px; padding: 20px; }
            .patient-photo { height: 190px; }
        }

        @media (max-width: 576px) {
            /* 手机端保留自适应高度，因为内容可能会超过一屏幕 */
            .section-why-choose, .section-innovation { padding: 50px 15px; }
            
            .stats-grid { grid-template-columns: 1fr; }
            .section-faq { padding: 3rem 15px; }
            .faq-container { width: 100%; padding: 1.5rem 1.2rem; border-radius: 18px; }
            .faq-header { flex-direction: column; align-items: flex-start; gap: 0.4rem; margin-bottom: 1.5rem; }
            .faq-title { font-size: 1.5rem; }
            summary { padding: 1.1rem 1rem; font-size: 0.98rem; }
            .faq-content { padding: 0 1rem 1.1rem 1rem; font-size: 0.9rem; }

            .site-footer { padding: 3rem 1.2rem 1.5rem 1.2rem; }
            .footer-container { grid-template-columns: 1fr; gap: 2rem; }
            .footer-brand { grid-column: span 1; }

            .patient-wrapper { padding: 40px 15px; }
            .patient-header { flex-direction: column; align-items: flex-start; }
            .patients-main-heading { font-size: 30px; }
            .nav-buttons { display: none; }
            .stories-grid { grid-template-columns: 1fr; gap: 20px; }
            .story-card { min-height: 500px; padding: 22px; }
            .patient-photo { height: 230px; }
            .review-text { font-size: 14px; }
        }
        /* ================================
   Patient Stories - 四个图片卡片
   ================================ */

.section-patients {
    width: 100%;
    box-sizing: border-box;
}

.patient-wrapper {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

/* 顶部标题 */
.patient-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

/* 四个卡片横向排列 */
.stories-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 24px !important;
    width: 100%;
    box-sizing: border-box;
}

/* 卡片 */
.story-card {
    width: 100% !important;
    min-width: 0;
    box-sizing: border-box;
    background: #fff;
    border: 1px solid #e1e8e5;
    border-radius: 20px;
    padding: 24px;
    overflow: hidden;
    display: flex !important;
    flex-direction: column !important;
}

/* 卡片上半部分 */
.card-top {
    width: 100%;
    display: block !important;
}

/* ================================
   图片
   ================================ */

.patient-photo {
    width: 100% !important;
    height: 220px !important;
    margin: 0 0 22px 0 !important;
    padding: 0 !important;
    border-radius: 14px;
    overflow: hidden;
    background: #dff3eb;
    display: block !important;
    box-sizing: border-box;
}

.patient-photo img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: cover !important;
    object-position: center center;
}

/* 不再显示 + */
.photo-placeholder {
    display: none !important;
}

/* 引号 + 星星 */
.card-meta {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    margin-bottom: 18px;
}

/* 评论 */
.review-text {
    width: 100%;
    margin: 0;
    box-sizing: border-box;
    line-height: 1.7;
}

/* 用户资料 */
.user-profile {
    width: 100%;
    margin-top: 22px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

/* 头像 */
.avatar {
    flex-shrink: 0;
}

/* 用户信息 */
.user-info {
    min-width: 0;
}

/* ================================
   平板
   ================================ */

@media (max-width: 1000px) {

    .stories-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

}

/* ================================
   手机
   ================================ */

@media (max-width: 600px) {

    .patient-wrapper {
        padding: 0 15px;
    }

    .stories-grid {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }

    .patient-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .patient-photo {
        height: 220px !important;
    }

}
/* 1. 默认让所有产品图片隐藏，并撑满容器 */


.product-img {
    display: none;
    width: 100%;
    height: 100%;
    object-fit: cover; /* 保证图片不变形 */
}

/* 2. 纯 CSS 联动逻辑：当对应的 radio 被选中时，显示对应的图片 */
/* 默认隐藏所有产品图片 */
.product-img {
    display: none;
    width: 100%; /* 或你原本设定的尺寸 */
    height: auto;
}

/* 当对应的单选框被选中时，显示对应的图片 */
#tech-1:checked ~ ~ .image-section .img-tech-1 {
    display: block;
}

#tech-2:checked ~ ~ .image-section .img-tech-2 {
    display: block;
}

#tech-3:checked ~ ~ .image-section .img-tech-3 {
    display: block;
}

}