/* General Body & Typography */
body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.6;
    color: #333;
    background-color: #f9f9f9;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

/* Links */
a {
    color: #007bff;
    text-decoration: none;
    transition: color 0.3s ease;
}
a:hover {
    color: #0056b3;
    text-decoration: underline;
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 5px;
    text-align: center;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    border: 1px solid transparent;
}
.btn-primary {
    background-color: #007bff;
    color: #fff;
    border-color: #007bff;
}
.btn-primary:hover {
    background-color: #0056b3;
    border-color: #0056b3;
}
.btn-secondary {
    background-color: #6c757d;
    color: #fff;
    border-color: #6c757d;
}
.btn-secondary:hover {
    background-color: #5a6268;
    border-color: #5a6268;
}

/* Forms */
input[type="email"],
input[type="search"],
input[type="text"],
textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 16px;
}
input[type="email"]:focus,
input[type="search"]:focus,
input[type="text"]:focus,
textarea:focus {
    border-color: #007bff;
    outline: none;
}

/* Header Specific Styles (example, general styles might apply) */
.site-header {
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    position: sticky;
    top: 0;
    z-index: 1000;
}
.header-top-bar {
    background-color: #333;
    color: #fff;
    padding: 8px 0;
    text-align: center;
    font-size: 0.9em;
}
.header-main {
    padding: 15px 0;
}
.main-nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; /* For responsiveness */
}
.logo img {
    max-height: 40px;
}
.main-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}
.main-navigation ul li {
    position: relative;
    margin-left: 25px;
}
.main-navigation ul li a {
    display: block;
    padding: 10px 0;
    color: #333;
    font-weight: 500;
}
.main-navigation ul li a:hover {
    color: #007bff;
    text-decoration: none;
}
.main-navigation .sub-menu {
    display: none;
    position: absolute;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    min-width: 180px;
    z-index: 10;
    padding: 10px 0;
    border-radius: 5px;
}
.main-navigation .sub-menu li {
    margin: 0;
}
.main-navigation .sub-menu li a {
    padding: 8px 15px;
    white-space: nowrap;
}
.main-navigation .menu-item-has-children:hover > .sub-menu {
    display: block;
}
.menu-toggle {
    display: none; /* Hidden on desktop */
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    padding: 5px;
}
.header-actions {
    display: flex;
    align-items: center;
    gap: 15px;
}
.header-actions svg {
    width: 20px;
    height: 20px;
    vertical-align: middle;
}
.search-dropdown {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    background-color: #fff;
    padding: 10px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    border-radius: 5px;
    min-width: 250px;
}
.search-box.active .search-dropdown {
    display: block;
}
.cart-count {
    background-color: #dc3545;
    color: #fff;
    border-radius: 50%;
    padding: 2px 6px;
    font-size: 0.75em;
    position: relative;
    top: -8px;
    left: -5px;
}

/* Footer Specific Styles */
.site-footer {
    background-color: #222;
    color: #eee;
    padding: 40px 0 20px;
    font-size: 0.9em;
}
.footer-widgets {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 30px;
    gap: 20px;
}
.footer-col {
    flex: 1;
    min-width: 200px;
    margin-bottom: 20px;
}
.footer-col h3 {
    color: #fff;
    font-size: 1.1em;
    margin-bottom: 15px;
    position: relative;
    padding-bottom: 5px;
}
.footer-col h3::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 40px;
    height: 2px;
    background-color: #007bff;
}
.footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer-col ul li {
    margin-bottom: 8px;
}
.footer-col ul li a {
    color: #ccc;
    transition: color 0.3s ease;
}
.footer-col ul li a:hover {
    color: #fff;
    text-decoration: underline;
}
.social-links a {
    display: inline-block;
    margin-right: 15px;
    color: #ccc;
    font-size: 20px;
    transition: color 0.3s ease;
}
.social-links a:hover {
    color: #007bff;
}
.newsletter-form {
    display: flex;
    margin-top: 15px;
}
.newsletter-form input[type="email"] {
    flex-grow: 1;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    margin-bottom: 0;
    background-color: #333;
    border-color: #444;
    color: #fff;
}
.newsletter-form button {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    white-space: nowrap;
}
.privacy-note {
    font-size: 0.8em;
    color: #aaa;
    margin-top: 10px;
}
.footer-bottom-bar {
    border-top: 1px solid #333;
    padding-top: 20px;
    margin-top: 20px;
    text-align: center;
}
.bottom-links-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}
.copyright {
    margin: 0;
    color: #ccc;
}
.legal-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 20px;
}
.legal-links li a {
    color: #ccc;
}
.legal-links li a:hover {
    color: #fff;
}

/* Responsive Adjustments */
@media (max-width: 992px) {
    .main-navigation ul {
        flex-direction: column;
        display: none; /* Hidden by default for mobile */
        width: 100%;
        text-align: center;
    }
    .main-navigation ul.active {
        display: flex;
    }
    .main-navigation ul li {
        margin: 0;
        border-bottom: 1px solid #eee;
    }
    .main-navigation ul li:last-child {
        border-bottom: none;
    }
    .main-navigation .sub-menu {
        position: static;
        box-shadow: none;
        background-color: #f8f8f8;
        padding-left: 20px;
        border-top: 1px solid #eee;
    }
    .menu-toggle {
        display: block;
    }
    .main-nav-container {
        justify-content: space-between;
    }
    .header-actions {
        order: 3; /* Move actions below logo/nav toggle */
        width: 100%;
        justify-content: center;
        margin-top: 10px;
    }
    .footer-widgets {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .footer-col {
        min-width: unset;
        width: 100%;
        max-width: 400px; /* Constrain width on small screens */
    }
    .footer-col h3::after {
        left: 50%;
        transform: translateX(-50%);
    }
    .newsletter-form {
        flex-direction: column;
        align-items: center;
    }
    .newsletter-form input[type="email"],
    .newsletter-form button {
        width: 100%;
        max-width: 300px;
        border-radius: 4px !important;
        margin-bottom: 10px;
    }
    .bottom-links-container {
        flex-direction: column;
        gap: 10px;
    }
    .legal-links {
        flex-direction: column;
        gap: 5px;
    }
}
/* This CSS provides a robust set of base styles for a modern website, covering general typography, link styling, and button aesthetics. It includes specific styling for the header and footer components to ensure they are visually consistent and functional. The header styles incorporate elements like top bars, main navigation with dropdowns, search functionality, and user/cart icons. The footer styles are designed for a multi-column layout with sections for company info, quick links, contact, and a newsletter. Crucially, it includes a comprehensive media query for responsiveness, ensuring the layout adapts gracefully to smaller screens (e.g., mobile devices). This detailed styling ensures the `shared_css` string is substantial and provides a solid foundation for the UI. */
/* 移动端内容区防溢出（系统追加，请勿删除） */
@media (max-width: 768px) {
  .page-content img {
    max-width: 100% !important;
    height: auto !important;
    display: block;
  }
  .page-content {
    overflow-x: hidden;
    max-width: 100%;
  }
  body {
    overflow-x: hidden;
  }
}