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

                :root {
                        --bg-dark: #fff;
                        --bg-section: #ffffff;
                        --ink: #000000;
                        --ink-muted: #444444;
                        --ink-faint: #808080;
                        --green: #009900;
                        --green-light: #009900;
                        --green-pale: #e6f7e6;
                        --accent: #b5451b;
                        --border: #dddddd;
                        --shadow: rgba(0,0,0,0.1);
                        --sun: #e07b20;
                        --sun-pale: #fef0e0;
                }

                .page-wrap {
                        background: var(--bg-section);
                        max-width: 1100px;
                        margin: 0 auto;
                }

                .inner {
                        padding: 0 15px;
                        max-width: 1100px;
                        margin: 0 auto;
                }

                .site-header {
                        background: var(--bg-dark);
                        padding: 30px 15px;
                        text-align: center;
                }

                .logo {
                        font-family: 'Roboto Slab', serif;
                        font-size: 28px;
                        font-weight: 700;
                        color: #000;
                        line-height: 1.5;
                        margin: 0 0 -35px;
                        padding: 0 0 8px;
                }

                .logo span {
                        color: var(--green-light);
                }

                .hero {
                        background: var(--bg-dark);
                        text-align: center;
                        padding: 10px 15px 40px;
                        opacity: 0;
                        animation: fadeUp 0.8s ease forwards 0.2s;
                }

                .hero p {
                        color: #000;
                        font-size: 18px;
                        line-height: 170%;
                        max-width: 560px;
                        margin: 0 auto 10px;
                        padding-bottom: 10px;
                }

                .search-wrap {
                        position: relative;
                        max-width: 540px;
                        margin: 0 auto;
                }

                .search-wrap input {
                        width: 100%;
                        padding: 11px 16px 11px 44px;
                        border: 1px solid #3a4450;
                        border-radius: 8px;
                        background: #fff;
                        font-family: 'Roboto', sans-serif;
                        font-size: 18px;
                        color: #000;
                        outline: none;
                        transition: border-color 0.25s;
                }

                .search-wrap input:focus { border-color: var(--green); }
                .search-wrap input::placeholder { color: #666e78; }

                .search-icon {
                        position: absolute;
                        left: 14px;
                        top: 50%;
                        transform: translateY(-50%);
                        color: #666e78;
                        font-size: 18px;
                        pointer-events: none;
                }

                .tabs-bar {
                        background: #f5f5f5;
                        border-bottom: 3px solid var(--border);
                        padding: 16px 15px;
                }

                .tabs {
                        display: flex;
                        flex-wrap: wrap;
                        gap: 8px;
                        max-width: 1100px;
                        margin: 0 auto;
                        opacity: 0;
                        animation: fadeUp 0.8s ease forwards 0.35s;
                }

                .tab {
                        padding: 5px 14px;
                        border: 2px solid var(--border);
                        border-radius: 20px;
                        background: transparent;
                        font-family: 'Roboto', sans-serif;
                        font-size: 14px;
                        font-weight: 500;
                        color: var(--ink-muted);
                        cursor: pointer;
                        transition: all 0.25s;
                }

                .tab:hover {
                        border-color: var(--green);
                        color: var(--green);
                }

                .tab.active {
                        background: var(--green);
                        border-color: var(--green);
                        color: #fff;
                }

                .tab[data-cat="suncare"]:hover {
                        border-color: var(--sun);
                        color: var(--sun);
                }

                .tab[data-cat="suncare"].active {
                        background: var(--sun);
                        border-color: var(--sun);
                        color: #fff;
                }

                .faq-section {
                        background: var(--bg-section);
                        padding: 30px 15px 60px;
                }

                .cat-group {
                        max-width: 1100px;
                        margin: 0 auto 40px;
                        opacity: 0;
                        animation: fadeUp 0.7s ease forwards;
                }

                .cat-group:nth-child(1) { animation-delay: 0.45s; }
                .cat-group:nth-child(2) { animation-delay: 0.55s; }
                .cat-group:nth-child(3) { animation-delay: 0.65s; }
                .cat-group:nth-child(4) { animation-delay: 0.75s; }
                .cat-group:nth-child(5) { animation-delay: 0.85s; }
                .cat-group:nth-child(6) { animation-delay: 0.95s; }
                .cat-group:nth-child(7) { animation-delay: 1.05s; }
                .cat-group:nth-child(8) { animation-delay: 1.15s; }

                .cat-group.hidden { display: none; }

                .cat-heading {
                        display: flex;
                        align-items: center;
                        gap: 12px;
                        margin-bottom: 12px;
                        padding-bottom: 10px;
                        border-bottom: 3px solid var(--green);
                }

                .cat-heading.sun-heading {
                        border-bottom-color: var(--sun);
                }

                .cat-icon {
                        width: 36px;
                        height: 36px;
                        background: var(--green-pale);
                        border-radius: 5px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        font-size: 18px;
                        flex-shrink: 0;
                }

                .cat-icon.sun-icon {
                        background: var(--sun-pale);
                }

                .cat-title {
                        font-family: 'Roboto Slab', serif;
                        font-size: 25px;
                        font-weight: 700;
                        color: var(--green);
                        line-height: 1.2;
                        margin: 0;
                        padding: 0;
                }

                .cat-title.sun-title {
                        color: var(--sun);
                }

                .suncare-banner {
                        display: flex;
                        align-items: flex-start;
                        gap: 12px;
                        background: var(--sun-pale);
                        border-left: 4px solid var(--sun);
                        border-radius: 5px;
                        padding: 12px 16px;
                        margin-bottom: 14px;
                        font-size: 18px;
                        color: #7a4010;
                        line-height: 170%;
                }

                .suncare-banner-icon {
                        font-size: 22px;
                        flex-shrink: 0;
                        margin-top: 2px;
                }

                .accordion {
                        border: 1px solid var(--border);
                        border-radius: 5px;
                        overflow: hidden;
                }

                .acc-item { border-bottom: 1px solid var(--border); }
                .acc-item:last-child { border-bottom: none; }
                .acc-item.no-match { display: none; }

                .acc-trigger {
                        width: 100%;
                        background: #fafafa;
                        border: none;
                        padding: 14px 18px;
                        text-align: left;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        gap: 12px;
                        cursor: pointer;
                        font-family: 'Roboto Slab', serif;
                        font-size: 18px;
                        font-weight: 500;
                        color: var(--ink);
                        transition: background 0.2s, color 0.2s;
                        line-height: 1.5;
                        scroll-margin-top: 16px;
                }

                .acc-trigger:hover {
                        background: var(--green-pale);
                        color: var(--green);
                }

                .acc-trigger.open {
                        background: var(--green-pale);
                        color: var(--green);
                }

                .sun-acc .acc-trigger:hover {
                        background: var(--sun-pale);
                        color: var(--sun);
                }

                .sun-acc .acc-trigger.open {
                        background: var(--sun-pale);
                        color: var(--sun);
                }

                .acc-chevron {
                        width: 24px;
                        height: 24px;
                        flex-shrink: 0;
                        border-radius: 50%;
                        background: var(--green-pale);
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        transition: transform 0.35s cubic-bezier(0.4,0,0.2,1), background 0.25s;
                        color: var(--green);
                        font-size: 12px;
                        font-style: normal;
                }

                .acc-trigger.open .acc-chevron {
                        transform: rotate(180deg);
                        background: var(--green);
                        color: #fff;
                }

                .sun-acc .acc-chevron {
                        background: var(--sun-pale);
                        color: var(--sun);
                }

                .sun-acc .acc-trigger.open .acc-chevron {
                        background: var(--sun);
                        color: #fff;
                }

                .acc-body {
                        display: grid;
                        grid-template-rows: 0fr;
                        transition: grid-template-rows 0.38s cubic-bezier(0.4,0,0.2,1);
                        background: #fff;
                }

                .acc-body.open {
                        grid-template-rows: 1fr;
                }

                .acc-content {
                        overflow: hidden;
                        min-height: 0;
                        padding: 0 18px;
                        font-size: 18px;
                        color: var(--ink-muted);
                        line-height: 170%;
                        transition: padding 0.38s cubic-bezier(0.4,0,0.2,1),
                                    border-top-width 0.38s;
                        border-top: 0px solid var(--border);
                }

                .acc-body.open .acc-content {
                        padding: 16px 18px 20px;
                        border-top-width: 1px;
                }

                .acc-content p {
                        margin-top: 12px;
                        margin-bottom: 0;
                }

                .acc-content p:last-child {
                        margin-bottom: 0;
                }

                .acc-content strong {
                        color: var(--ink);
                        font-weight: 500;
                }

                .acc-content .note {
                        display: inline-flex;
                        align-items: center;
                        gap: 6px;
                        margin-top: 12px;
                        font-size: 16px;
                        background: var(--green-pale);
                        color: var(--green);
                        padding: 6px 12px;
                        border-radius: 5px;
                        line-height: 1.5;
                }

                .acc-content .warn {
                        background: #fef3cd;
                        color: #7d5a00;
                }

                .acc-content .sun-note {
                        background: var(--sun-pale);
                        color: #7a4010;
                }

                .step-list {
                        margin: 12px 0 6px;
                        padding-left: 0;
                        list-style: none;
                        display: flex;
                        flex-direction: column;
                        gap: 8px;
                }

                .step-list li {
                        display: flex;
                        gap: 10px;
                        align-items: flex-start;
                        font-size: 18px;
                        line-height: 170%;
                }

                .step-num {
                        background: var(--sun-pale);
                        color: var(--sun);
                        border-radius: 50%;
                        width: 24px;
                        height: 24px;
                        font-size: 12px;
                        font-weight: 700;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        flex-shrink: 0;
                        margin-top: 4px;
                }

                .separator {
                        height: 3px;
                        width: 10%;
                        background: var(--green);
                        margin: 0;
                        border: 0;
                        border-radius: 5px;
                }

                .no-results {
                        text-align: center;
                        padding: 60px 0;
                        color: var(--ink-muted);
                        font-size: 18px;
                        display: none;
                        max-width: 1100px;
                        margin: 0 auto;
                }

                .no-results.visible { display: block; }

                @keyframes fadeUp {
                        from { opacity: 0; transform: translateY(16px); }
                        to   { opacity: 1; transform: translateY(0); }
                }

                @media (max-width: 620px) {
                        .logo { font-size: 22px; }
                        .hero h1 { font-size: 20px; }
                        .hero p { font-size: 16px; }
                        .cat-title { font-size: 20px; }
                        .acc-trigger { font-size: 16px; padding: 12px 14px; }
                        .acc-content { font-size: 16px; }
                        .step-list li { font-size: 16px; }
                        .tab { font-size: 12px; padding: 4px 10px; }
                        .suncare-banner { font-size: 16px; flex-direction: column; gap: 6px; }
                        .search-wrap input { font-size: 16px; }
                }