/*
Theme Name: Digital Products Theme
Theme URI: https://example.com/digital-products-theme/
Author: Manus AI
Author URI: https://manus.im/
Description: A professional WordPress theme designed for selling digital products, with extensive customization options via the WordPress Customizer.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: digital-products-theme
Tags: e-commerce, digital-products, customizer-options, responsive, block-editor-compatible

This theme is built to be fully customizable through the WordPress Customizer, allowing users to easily manage their site's appearance, including header, footer, and front page sections, without touching any code.
*/

/* --- Variables --- */
:root {
    --primary-color: #0073aa;
    --secondary-color: #00a0d2;
    --text-color: #333;
    --light-text-color: #777;
    --background-color: #fff;
    --light-background-color: #f8f8f8;
    --border-color: #eee;
    --container-width: 1200px;
    --transition: all 0.3s ease;
}

/* --- Base --- */
body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    color: var(--text-color);
    line-height: 1.6;
    background-color: var(--background-color);
}

.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 20px;
}

a {
    color: var(--primary-color);
    text-decoration: none;
    transition: var(--transition);
}

a:hover {
    color: var(--secondary-color);
}

img {
    max-width: 100%;
    height: auto;
}

h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    line-height: 1.2;
}

.button {
    display: inline-block;
    padding: 12px 24px;
    background-color: var(--primary-color);
    color: #fff;
    border-radius: 4px;
    font-weight: bold;
    text-align: center;
    cursor: pointer;
    border: none;
    transition: var(--transition);
}

.button:hover {
    background-color: var(--secondary-color);
    color: #fff;
}

/* --- Header --- */
.site-header {
    background-color: var(--light-background-color);
    padding: 20px 0;
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.site-header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.site-branding {
    display: flex;
    flex-direction: column;
}

.site-title {
    font-size: 1.5rem;
    font-weight: 800;
    margin: 0;
}

.site-title a {
    color: var(--text-color);
}

.site-description {
    font-size: 0.875rem;
    color: var(--light-text-color);
    margin: 0;
}

.main-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}

.main-navigation ul li {
    margin-left: 20px;
}

.main-navigation ul li a {
    color: var(--text-color);
    font-weight: 600;
    font-size: 0.95rem;
}

.main-navigation ul li a:hover {
    color: var(--primary-color);
}

.menu-toggle {
    display: none;
}

/* --- Front Page Sections --- */
section {
    padding: 80px 0;
}

.section-title {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 50px;
}

/* Hero Section */
.hero-section {
    background-size: cover;
    background-position: center;
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 120px 0;
}

.hero-title {
    font-size: 3.5rem;
    font-weight: 900;
    margin-bottom: 20px;
}

.hero-tagline {
    font-size: 1.25rem;
    margin-bottom: 30px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* Features Section */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.feature-item {
    text-align: center;
    padding: 40px;
    background-color: var(--light-background-color);
    border-radius: 8px;
    transition: var(--transition);
}

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

.feature-icon {
    margin-bottom: 20px;
}

.feature-title {
    font-size: 1.5rem;
    margin-bottom: 15px;
}

/* Products Section */
.products-section {
    background-color: #fff;
}

/* CTA Section */
.cta-section {
    background-color: var(--primary-color);
    color: #fff;
    text-align: center;
}

.cta-title {
    font-size: 2.5rem;
    margin-bottom: 20px;
}

.cta-description {
    font-size: 1.25rem;
    margin-bottom: 30px;
}

.cta-button {
    background-color: #fff;
    color: var(--primary-color);
}

.cta-button:hover {
    background-color: #f0f0f0;
    color: var(--secondary-color);
}

/* Testimonials Section */
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.testimonial-item {
    padding: 30px;
    background-color: var(--light-background-color);
    border-left: 5px solid var(--primary-color);
    border-radius: 4px;
}

.testimonial-content {
    font-style: italic;
    margin-bottom: 15px;
}

.testimonial-author {
    font-weight: bold;
    color: var(--primary-color);
}

/* --- Footer --- */
.site-footer {
    background-color: #1a1a1a;
    color: #fff;
    padding: 60px 0;
    text-align: center;
}

.site-footer .copyright {
    font-size: 0.875rem;
    opacity: 0.7;
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .site-header .container {
        flex-direction: column;
        align-items: flex-start;
    }

    .menu-toggle {
        display: block;
        background: none;
        border: 1px solid var(--text-color);
        padding: 5px 10px;
        margin-top: 10px;
    }

    .main-navigation {
        width: 100%;
        display: none;
    }

    .main-navigation.toggled {
        display: block;
    }

    .main-navigation ul {
        flex-direction: column;
        width: 100%;
    }

    .main-navigation ul li {
        margin: 10px 0;
    }

    .hero-title {
        font-size: 2.5rem;
    }

    section {
        padding: 50px 0;
    }
}

/* --- WooCommerce Tweaks --- */
.woocommerce ul.products li.product {
    text-align: center;
    border: 1px solid var(--border-color);
    padding: 15px;
    border-radius: 8px;
    transition: var(--transition);
}

.woocommerce ul.products li.product:hover {
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.woocommerce ul.products li.product .button {
    margin-top: 15px;
    width: 100%;
}