/*
Theme Name: Sat-Tech Satellite Shop
Theme URI: https://sat-tech.sg
Author: Sat-Tech Team
Author URI: https://sat-tech.sg
Description: A minimalist, responsive WooCommerce theme for satellite communication products.
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: sat-tech
*/

:root {
    --primary-color: #0f172a; /* Dark navy for text/headings */
    --accent-color: #0554f2; /* Bright blue for buttons/icons */
    --secondary-color: #e2e8f0; /* Tech silver */
    --text-color: #333333;
    --text-light: #718096;
    --white: #ffffff;
    --accent-hover: #0443c2;
    --font-family: neue-haas-grotesk-display, sans-serif;
    --nav-height: 80px;
    --top-bar-height: 40px;
}

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

fieldset {
    border: none;
    margin: 20px auto;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--nav-height) + var(--top-bar-height));
}

body {
    font-family: var(--font-family);
    color: var(--text-color);
    line-height: 1.6;
    background-color: #f7fafc;
    overflow-x: hidden;
    padding-top: var(--top-bar-height);
}

a {
    text-decoration: none;
    color: inherit;
    transition: color 0.3s;
}

ul {
    list-style: none;
}

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

/* Container */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Section Common */
.section {
    padding: 80px 0;
}

/* Ensure content clears the fixed header */
.container.section {
    margin-top: 60px;
    padding-left: 20px;
    padding-right: 20px;
}

.section-title {
    text-align: center;
    font-size: 1.75rem;
    margin-bottom: 40px;
    color: var(--primary-color);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.3;
}

/* Responsive section title */
@media (max-width: 1024px) {
    .section-title {
        font-size: 1.5rem;
        margin-bottom: 35px;
    }
}

@media (max-width: 768px) {
    .section-title {
        font-size: 1.35rem;
        margin-bottom: 30px;
        letter-spacing: -0.01em;
    }
}

@media (max-width: 480px) {
    .section-title {
        font-size: 1.2rem;
        margin-bottom: 25px;
    }
}

h1, h2, h3, h4, h5, h6 {
    color: var(--primary-color);
}

/* Top Bar */
.top-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--top-bar-height);
    background-color: var(--white);
    border-bottom: 1px solid var(--secondary-color);
    z-index: 1001;
    font-size: 0.85rem;
    color: var(--text-light);
    display: flex;
    align-items: center;
}

.top-bar-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.top-info span, .top-social span {
    margin-right: 20px;
}

.top-info i, .top-social i {
    color: var(--accent-color);
    margin-right: 5px;
}

.top-social {
    display: flex;
    align-items: center;
}

.social-icons a {
    margin-left: 10px;
    width: 25px;
    height: 25px;
    background-color: var(--accent-color);
    color: var(--white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    font-size: 0.8rem;
    transition: background-color 0.3s;
}

.social-icons a:hover {
    background-color: var(--accent-hover);
}

.social-icons i {
    color: var(--white) !important;
    margin-right: 0;
}

/* Navbar */
.navbar {
    position: fixed;
    top: var(--top-bar-height);
    left: 0;
    width: 100%;
    height: var(--nav-height);
    background-color: var(--white);
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    z-index: 1000;
    display: flex;
    align-items: center;
}

.navbar-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.logo a {
    font-size: 1.8rem;
    font-weight: bold;
    color: var(--primary-color);
    display: flex;
    align-items: center;
    gap: 10px;
}

.nav-links {
    display: flex;
    gap: 30px;
    align-items: center;
}

.nav-links a {
    font-weight: 600;
    color: var(--primary-color);
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.nav-links a:hover {
    color: var(--accent-color);
}

.nav-btn {
    padding: 10px 25px;
    background-color: var(--accent-color);
    color: var(--white) !important;
    border-radius: 4px;
    transition: background-color 0.3s;
}

.nav-btn:hover {
    background-color: var(--accent-hover);
}

/* Mobile Menu Toggle */
.menu-toggle {
    display: none;
    flex-direction: column;
    cursor: pointer;
    gap: 5px;
}

.bar {
    width: 25px;
    height: 3px;
    background-color: var(--primary-color);
    transition: all 0.3s ease;
}

/* Hero Section */
.hero {
    position: relative;
    min-height: 100vh;
    padding-top: calc(var(--nav-height) + 40px);
    padding-bottom: 80px;
    /* Use dynamic path in PHP if needed, here we assume it's in theme root */
    background: url('earth-7641871.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: scroll;
    color: var(--white);
    display: flex;
    align-items: center;
    overflow: hidden;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(10, 25, 47, 0.9) 0%, rgba(10, 25, 47, 0.7) 100%);
    z-index: 1;
}

.hero-wave {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 60%;
    height: 100%;
    background: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 10px,
        rgba(49, 130, 206, 0.05) 10px,
        rgba(49, 130, 206, 0.05) 20px
    );
    z-index: 1;
    pointer-events: none;
    mask-image: linear-gradient(to left, black, transparent);
    -webkit-mask-image: linear-gradient(to left, black, transparent);
}

.hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(circle at 22% 38%, rgba(5, 84, 242, 0.22), transparent 46%),
        radial-gradient(circle at 78% 64%, rgba(5, 84, 242, 0.16), transparent 42%),
        radial-gradient(circle at 55% 20%, rgba(5, 84, 242, 0.10), transparent 38%);
    opacity: 0.55;
    animation: heroSignalPulse 6s ease-in-out infinite;
}

.hero-signal-canvas {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0.9;
    mix-blend-mode: screen;
}

@keyframes heroSignalPulse {
    0%, 100% {
        opacity: 0.35;
        transform: scale(1);
    }
    50% {
        opacity: 0.65;
        transform: scale(1.02);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero::after {
        animation: none;
    }

    .hero-signal-canvas {
        display: none;
    }
}

.hero-container {
    position: relative;
    z-index: 3;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: 50px;
}

.hero-text {
    flex: 1;
    text-align: left;
    max-width: 600px;
}

.hero-subtitle {
    display: inline-block;
    color: var(--accent-color);
    font-weight: 600;
    letter-spacing: 1px;
    margin-bottom: 15px;
    text-transform: uppercase;
    font-size: 0.9rem;
}

.hero-text h1 {
    font-size: 4rem;
    font-weight: 800;
    margin-bottom: 25px;
    line-height: 1.1;
    color: var(--white);
}

.hero-text p {
    font-size: 1.2rem;
    margin-bottom: 40px;
    opacity: 0.9;
    line-height: 1.8;
    color: #cbd5e0;
}

.hero-text .cta-button {
    background-color: var(--accent-color);
    border-radius: 4px;
    padding: 18px 45px;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--white);
    display: inline-block;
}

.hero-text .cta-button i {
    margin-left: 10px;
    transition: transform 0.3s;
}

.hero-text .cta-button:hover i {
    transform: translateX(5px);
}

/* Hero Form Card (Optional for WP if using form plugin) */
.hero-card {
    flex: 0 0 400px;
    background-color: var(--white);
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
    color: var(--text-color);
    position: relative;
}

.hero-card h3 {
    font-size: 1.8rem;
    margin-bottom: 10px;
    color: var(--primary-color);
    font-weight: 700;
    text-align: center;
}

.hero-card p {
    text-align: center;
    color: var(--text-light);
    margin-bottom: 30px;
    font-size: 0.95rem;
}

.hero-form .form-group {
    margin-bottom: 20px;
}

.hero-form input, 
.hero-form select {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--secondary-color);
    border-radius: 4px;
    font-size: 1rem;
    color: var(--text-color);
    background-color: #f8fafc;
    transition: border-color 0.3s;
}

.hero-form input:focus, 
.hero-form select:focus {
    outline: none;
    border-color: var(--accent-color);
    background-color: var(--white);
}

.submit-btn {
    width: 100%;
    padding: 15px;
    background-color: var(--accent-color);
    color: var(--white);
    border: none;
    border-radius: 4px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s;
}

.submit-btn:hover {
    background-color: var(--accent-hover);
}

/* Features Section */
.features {
    background-color: #f8fafc; /* Lighter background for contrast */
    padding: 80px 0;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.feature-item {
    background: var(--white);
    padding: 30px 25px;
    border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: left; /* Align text left as per screenshot */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.feature-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.icon-box {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    font-size: 1.5rem;
    color: var(--white);
    margin-left: 0; /* Reset margin */
    margin-right: 0;
}

/* Specific colors for each icon box based on the screenshot */
.feature-item:nth-child(1) .icon-box {
    background-color: #3b82f6; /* Blue */
}

.feature-item:nth-child(2) .icon-box {
    background-color: #10b981; /* Green */
}

.feature-item:nth-child(3) .icon-box {
    background-color: #f59e0b; /* Orange/Yellow */
}

.feature-item:nth-child(4) .icon-box {
    background-color: #8b5cf6; /* Purple */
}

.feature-item h3 {
    font-size: 1.1rem;
    margin-bottom: 12px;
    color: #1f2937; /* Darker gray/black */
    font-weight: 700;
}

.feature-item p {
    color: #6b7280; /* Gray text */
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 0;
    max-width: 100%;
}

/* About Section */
.about {
    background-color: #0a192f;
    color: var(--white);
    position: relative;
    overflow: hidden;
    padding: 100px 0;
}

.about::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -20%;
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, rgba(49, 130, 206, 0.15) 0%, transparent 70%);
    border-radius: 50%;
    z-index: 1;
}

.about::after {
    content: '';
    position: absolute;
    bottom: -30%;
    right: -10%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(0, 255, 136, 0.1) 0%, transparent 70%);
    border-radius: 50%;
    z-index: 1;
}

.tech-grid-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 50px 50px;
    z-index: 0;
}

.about-container {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 60px;
    align-items: center;
    position: relative;
    z-index: 2;
}

.about-text-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

.about-text-card h2 {
    font-size: 2.5rem;
    margin-bottom: 25px;
    background: linear-gradient(90deg, var(--white), #a0aec0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
}

.about-text-card p {
    color: #cbd5e0;
    margin-bottom: 20px;
    font-size: 1.05rem;
    line-height: 1.8;
}

.about-image {
    position: relative;
}

.about-image img {
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
    position: relative;
    z-index: 2;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.about-image::before {
    content: '';
    position: absolute;
    top: -20px;
    left: -20px;
    width: 100%;
    height: 100%;
    border: 2px solid var(--accent-color);
    border-radius: 20px;
    z-index: 1;
    opacity: 0.5;
}

.about-image::after {
    content: '';
    position: absolute;
    bottom: -20px;
    right: -20px;
    width: 100%;
    height: 100%;
    border: 2px solid #00ff88;
    border-radius: 20px;
    z-index: 1;
    opacity: 0.3;
}

/* Products Section (B2C Style) - Adapted for WooCommerce */
body.home .section.products {
    background-color: #f8fafc;
    padding: 80px 0 0 0;
    position: relative;
}


body.home .section.products::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.55;
    background-image:
        radial-gradient(circle at 18% 20%, rgba(0, 255, 136, 0.10) 0%, rgba(0, 255, 136, 0) 55%),
        radial-gradient(circle at 86% 28%, rgba(5, 84, 242, 0.10) 0%, rgba(5, 84, 242, 0) 60%),
        linear-gradient(rgba(15, 23, 42, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15, 23, 42, 0.035) 1px, transparent 1px);
    background-size: auto, auto, 46px 46px, 46px 46px;
    z-index: 0;
}

body.home .section.products::after {
    content: '';
    position: absolute;
    left: -220px;
    top: 120px;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0.14;
    background:
        conic-gradient(from 90deg, rgba(0, 255, 136, 0) 0deg, rgba(0, 255, 136, 0.65) 18deg, rgba(0, 255, 136, 0) 36deg),
        radial-gradient(circle, rgba(0, 255, 136, 0.18) 0%, rgba(0, 255, 136, 0) 60%);
    animation: heroRadarSweep 7.5s linear infinite;
    mix-blend-mode: screen;
    z-index: 0;
}

.products-grid,
ul.products {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Fix for WooCommerce clearfix pseudo-elements breaking grid layout */
ul.products::before,
ul.products::after {
    display: none !important;
}

/* Map Woo Classes to our Design */
.woocommerce ul.products li.product, 
.product-card {
    background-color: var(--white);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
    transition: none;
    display: flex;
    flex-direction: column;
    position: relative;
    border: 1px solid #edf2f7;
    margin-bottom: 0 !important; /* Override Woo margin */
    width: 100% !important; /* Override Woo width */
}

.product-content-wrapper {
    padding: 25px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.woocommerce ul.products li.product img,
.product-image img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    transition: none;
    display: block;
    margin: 0 auto;
}

/* Category Label */
.product-loop-category {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: #94a3b8; /* Slate 400 */
    font-weight: 600;
    margin-bottom: 8px;
    letter-spacing: 0.5px;
}

/* Title */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.product-title {
    font-size: 1.35rem;
    margin: 0 0 10px 0;
    color: var(--primary-color);
    font-weight: 700;
    line-height: 1.3;
}

/* Clickable Title */
.product-title-clickable {
    cursor: pointer;
    transition: color 0.2s ease, opacity 0.2s ease;
    position: relative;
}

.product-title-clickable:hover {
    color: var(--accent-color);
    opacity: 0.85;
}

.product-title-clickable::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--accent-color);
    transition: width 0.2s ease;
}

.product-title-clickable:hover::after {
    width: 100%;
}

/* Short Description */
.product-loop-description {
    font-size: 0.95rem;
    color: var(--text-light);
    line-height: 1.6;
    margin-bottom: 25px;
    display: block;
    min-height: 4.8em; /* Fixed height for 3 lines (1.6 line-height * 3) */
    overflow: hidden;
}

.product-excerpt-text {
    display: -webkit-box;
    -webkit-line-clamp: 3; /* Limit to 3 lines */
    -webkit-box-orient: vertical;
    word-wrap: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.6;
    max-height: 4.8em; /* Max height for 3 lines */
}

/* Bottom Row (Price + Button) */
.product-bottom-row {
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.woocommerce ul.products li.product .price,
.product-price {
    font-size: 1.5rem;
    color: var(--primary-color);
    font-weight: 800;
    margin: 0;
    display: block;
}

.woocommerce ul.products li.product .button,
.buy-button {
    display: inline-block;
    width: auto;
    background-color: var(--accent-color);
    color: var(--white);
    padding: 10px 24px;
    border-radius: 50px;
    font-weight: 600;
    margin: 0;
    transition: all 0.3s;
    box-shadow: 0 4px 12px rgba(49, 130, 206, 0.3);
    text-align: center;
    line-height: 1.5;
}

.woocommerce ul.products li.product .product-bottom-row .button.add_to_cart_button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.woocommerce ul.products li.product .product-bottom-row .button.add_to_cart_button i {
    font-size: 0.95em;
    line-height: 1;
}

.woocommerce ul.products li.product .button:hover,
.buy-button:hover {
    background-color: var(--accent-hover);
    box-shadow: 0 4px 12px rgba(49, 130, 206, 0.3);
    color: var(--white);
}

/* Product Badges (Sale flash / Custom) */
.woocommerce span.onsale {
    position: absolute;
    top: 20px;
    left: 20px;
    background: #ff6b6b; /* Red for Sale/Hot */
    color: white;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 10;
    box-shadow: 0 4px 10px rgba(255, 107, 107, 0.3);
    min-height: auto;
    line-height: normal;
}

.products-carousel-wrapper.style2-fullwidth {
    position: relative;
    margin-top: 40px;
    width: 100%;
    max-width: 100%;
}

.products-carousel-wrapper.style2-fullwidth .products-carousel-inner {
    display: flex;
    align-items: center;
    gap: 20px;
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 15px;
    width: 100%;
    box-sizing: border-box;
}

.products-carousel-wrapper.style2-fullwidth .products-carousel-container {
    position: relative;
    overflow: hidden;
    flex: 1;
    width: 100%;
    min-width: 0;
}

.products-carousel-wrapper.style2-fullwidth .products-carousel-track,
.products-carousel-wrapper.style2-fullwidth .products-carousel-track .woocommerce {
    width: 100%;
}

.products-carousel-wrapper.style2-fullwidth .products-carousel-track ul.products {
    display: flex !important;
    flex-wrap: nowrap !important;
    grid-template-columns: none !important;
    gap: 20px;
    list-style: none;
    margin: 0 !important;
    padding: 0 !important;
    width: 100%;
    will-change: transform;
}

.products-carousel-wrapper.style2-fullwidth .products-carousel-track ul.products li.product {
    flex: 0 0 calc((100% - 60px) / 4) !important;
    min-width: calc((100% - 60px) / 4) !important;
    max-width: calc((100% - 60px) / 4) !important;
    width: calc((100% - 60px) / 4) !important;
    box-sizing: border-box;
    margin: 0 !important;
    float: none !important;
    clear: none !important;
    flex-shrink: 0;
}

.products-carousel-wrapper.style2-fullwidth .products-carousel-track ul.products li.product img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    object-position: center !important;
    transition: none !important;
    transform: none !important;
    margin: 0 !important;
}

.products-carousel-wrapper.style2-fullwidth .products-carousel-track ul.products li.product:hover img {
    transform: none !important;
}

.products-carousel-wrapper.style2-fullwidth .carousel-nav {
    flex-shrink: 0;
    background: var(--white);
    border: 2px solid var(--accent-color);
    color: var(--accent-color);
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: all 0.2s ease;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

.products-carousel-wrapper.style2-fullwidth .carousel-nav:hover {
    background: var(--accent-color);
    color: var(--white);
}

.products-carousel-wrapper.style2-fullwidth .carousel-nav i {
    font-size: 18px;
}

.products-carousel-wrapper.style2-fullwidth .carousel-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
}

.products-carousel-wrapper.style2-fullwidth .carousel-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: #cbd5e1;
    cursor: pointer;
    transition: all 0.2s ease;
}

.products-carousel-wrapper.style2-fullwidth .carousel-dot.active {
    width: 28px;
    background: var(--accent-color);
}

@media (max-width: 1024px) and (min-width: 769px) {
    .products-carousel-wrapper.style2-fullwidth .products-carousel-track ul.products li.product {
        flex: 0 0 calc((100% - 20px) / 2) !important;
        min-width: calc((100% - 20px) / 2) !important;
        max-width: calc((100% - 20px) / 2) !important;
        width: calc((100% - 20px) / 2) !important;
    }
}

@media (max-width: 768px) {
    .products-carousel-wrapper.style2-fullwidth {
        margin-top: 30px;
        padding: 0 15px;
    }

    .products-carousel-wrapper.style2-fullwidth .products-carousel-inner {
        gap: 0;
        padding: 0;
    }

    .products-carousel-wrapper.style2-fullwidth .carousel-nav {
        display: none !important;
    }

    .products-carousel-wrapper.style2-fullwidth .products-carousel-track ul.products {
        gap: 16px;
    }

    .products-carousel-wrapper.style2-fullwidth .products-carousel-track ul.products li.product {
        flex: 0 0 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .products-carousel-wrapper.style2-fullwidth .products-carousel-track ul.products li.product img {
        height: min(calc(100vw - 30px), 360px) !important;
        aspect-ratio: auto !important;
    }

    .products-carousel-wrapper.style2-fullwidth .product-content-wrapper {
        padding: 16px;
    }
}

/* FAQ */
.faq {
    background-color: #f1f5f9;
}

.faq-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

@media (max-width: 768px) {
    .faq-grid {
        grid-template-columns: 1fr;
    }
}

.faq-item {
    background: var(--white);
    padding: 25px;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.faq-item h3 {
    color: var(--primary-color);
    margin-bottom: 10px;
    font-size: 1.1rem;
}

.faq-item p {
    color: var(--text-light);
    font-size: 0.95rem;
}

/* Contact Section */
.contact-section {
    background-color: #f8fafc;
    color: var(--text-color);
    padding: 60px 0;
    text-align: center;
}

.contact-section .section-header {
    max-width: 600px;
    margin: 0 auto 40px;
}

.contact-desc {
    font-size: 1.1rem;
    color: var(--text-light);
    margin-top: 15px;
}

.contact-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.contact-item {
    background: var(--white);
    padding: 30px;
    border: 1px solid var(--secondary-color); 
    border-radius: 10px;
    transition: all 0.3s ease;
}

.contact-item:hover {
    border-color: var(--accent-color);
    transform: translateY(-5px);
}

.contact-icon {
    font-size: 2.5rem;
    color: var(--accent-color);
    margin-bottom: 15px;
}

.contact-item h3 {
    font-size: 1.25rem;
    margin-bottom: 10px;
    color: var(--primary-color);
}

.contact-detail {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 5px;
}

.contact-sub {
    font-size: 0.9rem;
    color: var(--text-light);
    margin-bottom: 20px;
}

.text-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--accent-color);
    font-weight: 600;
    font-size: 0.95rem;
    transition: gap 0.3s;
}

.text-link:hover {
    gap: 12px;
    text-decoration: underline;
}

/* Responsive Optimization */
@media (max-width: 900px) {
    .contact-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .contact-item:last-child {
        grid-column: span 2;
    }
}

@media (max-width: 600px) {
    .contact-section {
        padding: 40px 0;
    }

    .contact-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .contact-item {
        padding: 20px;
        display: flex;
        align-items: center;
        text-align: left;
    }
    
    .contact-item:last-child {
        grid-column: auto;
    }

    .contact-icon {
        font-size: 2rem;
        margin-bottom: 0;
        margin-right: 20px;
        flex-shrink: 0;
    }
    
    .contact-content {
        flex: 1;
    }

    .contact-item h3 {
        font-size: 1.1rem;
        margin-bottom: 5px;
    }
    
    .contact-detail {
        font-size: 1rem;
    }
    
    .contact-sub {
        margin-bottom: 10px;
        font-size: 0.85rem;
    }
}

/* Footer */
.footer {
    background-color: var(--primary-color);
    color: var(--white);
    padding: 80px 0 30px;
    font-size: 0.95rem;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1.5fr;
    gap: 60px;
    margin-bottom: 60px;
}

.footer-logo {
    font-size: 1.8rem;
    font-weight: 800;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.footer-brand p {
    opacity: 0.7;
    line-height: 1.6;
    margin-bottom: 25px;
    max-width: 300px;
}

.footer-brand .social-links {
    display: flex;
    gap: 15px;
    margin-top: 20px;
}

.footer-brand .social-links a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    color: var(--white);
    transition: all 0.3s ease;
    font-size: 1.1rem;
}

.footer-brand .social-links a:hover {
    background: var(--accent-color);
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(49, 130, 206, 0.3);
}

.footer h4 {
    font-size: 1.1rem;
    margin-bottom: 25px;
    position: relative;
    padding-bottom: 10px;
    color: var(--white);
}

.footer h4::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 30px;
    height: 2px;
    background: var(--accent-color);
}

.footer-links ul li {
    margin-bottom: 12px;
}

.footer-links ul li a {
    opacity: 0.7;
    transition: all 0.3s;
}

.footer-links ul li a:hover {
    opacity: 1;
    color: var(--accent-color);
    padding-left: 5px;
}

.footer-newsletter p {
    opacity: 0.7;
    margin-bottom: 20px;
}

.newsletter-input-group {
    display: flex;
    background: rgba(255,255,255,0.1);
    border-radius: 5px;
    padding: 5px;
    border: 1px solid rgba(255,255,255,0.1);
}

.newsletter-input-group input {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--white);
    padding: 10px 15px;
    outline: none;
}

.newsletter-input-group button {
    background: var(--accent-color);
    border: none;
    color: var(--white);
    width: 40px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.3s;
}

.newsletter-input-group button:hover {
    background: var(--accent-hover);
}

.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
    opacity: 0.6;
}

.footer-legal {
    display: flex;
    gap: 20px;
}

.footer-legal a:hover {
    color: var(--white);
    text-decoration: underline;
}

/* WooCommerce Overrides */
.woocommerce-page .entry-title {
    color: var(--primary-color);
    text-align: center;
    margin-bottom: 40px;
}

.single-product.woocommerce-page .entry-title {
    text-align: left;
    margin-bottom: 24px;
}

.post-type-archive-product .container.section,
.tax-product_cat .container.section,
.tax-product_tag .container.section,
.tax-product_brand .container.section {
    padding-top: 60px;
    padding-bottom: 80px;
}

.post-type-archive-product .page-title,
.tax-product_cat .page-title,
.tax-product_tag .page-title,
.tax-product_brand .page-title {
    margin: 0 0 18px 0;
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--primary-color);
    letter-spacing: 0.2px;
}

.post-type-archive-product .woocommerce-notices-wrapper,
.tax-product_cat .woocommerce-notices-wrapper,
.tax-product_tag .woocommerce-notices-wrapper,
.tax-product_brand .woocommerce-notices-wrapper {
    position: static;
    bottom: auto;
    right: auto;
    left: auto;
    max-width: none;
    margin: 0 0 18px 0;
}

.post-type-archive-product .woocommerce-result-count,
.tax-product_cat .woocommerce-result-count,
.tax-product_tag .woocommerce-result-count,
.tax-product_brand .woocommerce-result-count {
    float: left;
    margin: 0 0 18px 0;
    color: var(--text-light);
    font-size: 0.95rem;
}

.post-type-archive-product .woocommerce-ordering,
.tax-product_cat .woocommerce-ordering,
.tax-product_tag .woocommerce-ordering,
.tax-product_brand .woocommerce-ordering {
    float: right;
    margin: 0 0 18px 0;
}

.post-type-archive-product .woocommerce-ordering select.orderby,
.tax-product_cat .woocommerce-ordering select.orderby,
.tax-product_tag .woocommerce-ordering select.orderby,
.tax-product_brand .woocommerce-ordering select.orderby {
    height: 44px;
    padding: 0 14px;
    border: 1px solid var(--secondary-color);
    border-radius: 10px;
    background: #fff;
    color: var(--text-color);
    font-size: 0.95rem;
    outline: none;
}

.post-type-archive-product ul.products,
.tax-product_cat ul.products,
.tax-product_tag ul.products,
.tax-product_brand ul.products {
    clear: both;
    margin-top: 10px !important;
}

@media (max-width: 768px) {
    .container.section {
        padding-left: 15px;
        padding-right: 15px;
    }

    .post-type-archive-product .woocommerce-result-count,
    .tax-product_cat .woocommerce-result-count,
    .tax-product_tag .woocommerce-result-count,
    .tax-product_brand .woocommerce-result-count,
    .post-type-archive-product .woocommerce-ordering,
    .tax-product_cat .woocommerce-ordering,
    .tax-product_tag .woocommerce-ordering,
    .tax-product_brand .woocommerce-ordering {
        float: none;
        width: 100%;
    }

    .post-type-archive-product .woocommerce-ordering select.orderby,
    .tax-product_cat .woocommerce-ordering select.orderby,
    .tax-product_tag .woocommerce-ordering select.orderby,
    .tax-product_brand .woocommerce-ordering select.orderby {
        width: 100%;
    }
}

.single-product .container.section {
    padding-top: 60px;
    padding-bottom: 80px;
}

.single-product .woocommerce-notices-wrapper {
    position: static;
    bottom: auto;
    right: auto;
    left: auto;
    max-width: none;
    margin: 0 0 18px 0;
}

.single-product .woocommerce-breadcrumb {
    margin: 0 0 12px 0;
    color: var(--text-light);
    font-size: 0.95rem;
}

.single-product .woocommerce-breadcrumb a {
    color: var(--text-light);
    text-decoration: none;
}

.single-product .woocommerce-breadcrumb a:hover {
    color: var(--accent-color);
}

.single-product .woocommerce div.product {
    display: block;
}

.single-product .woocommerce div.product .sat-single-product__main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 32px;
    align-items: start;
}

.single-product .woocommerce div.product .woocommerce-product-gallery,
.single-product .woocommerce div.product .summary {
    float: none;
    width: 100%;
}

.single-product .woocommerce div.product .woocommerce-product-gallery {
    margin: 0;
}

.single-product .woocommerce div.product .woocommerce-product-gallery__wrapper {
    background: #fff;
    border: 1px solid #edf2f7;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0,0,0,0.06);
}

.single-product .woocommerce div.product .woocommerce-product-gallery__wrapper img {
    display: block;
    width: 100%;
    height: auto;
}

.single-product .woocommerce div.product div.images .woocommerce-product-gallery__trigger {
    display: none;
}

/* 产品容器基础样式 */
.single-product .sat-single-product__summary.summary.entry-summary {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    background: var(--white);
    border-radius: 12px;
    padding: 22px;
    border: 1px solid var(--secondary-color);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.06);
    position: relative;
}

.single-product .sat-single-product__summary::before {
    display: none;
    content: '';
}

/* 产品标题样式 */
.single-product .product_title.entry-title {
    font-size: 2.1rem;
    font-weight: 800;
    color: var(--primary-color);
    margin: 0 0 12px 0;
    letter-spacing: -0.4px;
    line-height: 1.2;
}

/* 价格样式 */
.single-product .summary .price {
    display: inline-block;
    margin: 0 0 14px 0;
    padding: 0;
    color: var(--accent-color);
    background: none;
    -webkit-text-fill-color: currentColor;
}

.single-product .summary .price .woocommerce-Price-amount {
    font-size: 1.85rem;
    font-weight: 800;
}

.single-product .summary .price .woocommerce-Price-currencySymbol {
    font-size: 1.2rem;
    vertical-align: top;
    margin-right: 2px;
}

/* 产品描述区域 */
.single-product .woocommerce-product-details__short-description {
    background: var(--white);
    padding: 16px;
    border-radius: 10px;
    margin: 16px 0;
    border: 1px solid var(--secondary-color);
    box-shadow: none;
}

.single-product .woocommerce-product-details__short-description p {
    color: var(--text-light);
    line-height: 1.75;
    font-size: 1rem;
    margin: 0 0 12px 0;
}

.single-product .woocommerce-product-details__short-description p:last-child {
    margin-bottom: 0;
}

/* 表单容器 */
.single-product form.cart {
    background: var(--white);
    padding: 16px;
    border-radius: 10px;
    margin: 16px 0;
    border: 1px solid var(--secondary-color);
    box-shadow: none;
}

/* 数量选择器样式 */
.single-product form.cart .quantity {
    display: inline-flex;
    align-items: center;
    background: #f8fafc;
    border-radius: 10px;
    padding: 3px;
    margin-right: 12px;
    border: 1px solid var(--secondary-color);
}

.single-product form.cart .quantity:hover {
    border-color: var(--accent-color);
}

.single-product form.cart .sat-qty-btn {
    background: var(--white);
    border: 1px solid var(--secondary-color);
    width: 34px;
    height: 34px;
    border-radius: 8px;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--accent-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.single-product form.cart .sat-qty-btn:hover {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: var(--white);
    transform: none;
}

.single-product form.cart .sat-qty-btn:active {
    transform: none;
}

.single-product form.cart .qty.text {
    width: 56px;
    height: 34px;
    border: none;
    background: transparent;
    text-align: center;
    font-size: 1rem;
    font-weight: 700;
    color: var(--primary-color);
    margin: 0 4px;
    -moz-appearance: textfield;
}

.single-product form.cart .qty.text::-webkit-outer-spin-button,
.single-product form.cart .qty.text::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* 加入购物车按钮样式 */
.single-product form.cart .single_add_to_cart_button.button.alt {
    background: var(--accent-color);
    color: var(--white);
    border: none;
    padding: 12px 22px;
    border-radius: 10px;
    font-size: 1.05rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    letter-spacing: 0.2px;
    box-shadow: none;
}

.single-product form.cart .single_add_to_cart_button.button.alt:hover {
    background: var(--accent-hover);
    transform: translateY(-1px);
    box-shadow: none;
}

.single-product form.cart .single_add_to_cart_button.button.alt:active {
    transform: none;
}

.single-product form.cart .single_add_to_cart_button.button.alt.loading::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: var(--white);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-left: 10px;
}

/* 产品分类样式 */
.single-product .product_meta {
    background: var(--white);
    padding: 14px 16px;
    border-radius: 10px;
    margin-top: 16px;
    border: 1px solid var(--secondary-color);
    color: var(--text-light);
    font-size: 0.95rem;
}

.single-product .posted_in a {
    color: var(--accent-color);
    text-decoration: none;
    font-weight: 700;
}

.single-product .posted_in a:hover {
    text-decoration: underline;
}

/* Recaptcha 容器样式 */
.single-product #ppcp-recaptcha-v2-container:not(:empty) {
    background: #f8fafc;
    padding: 12px;
    border-radius: 10px;
    border: 1px solid var(--secondary-color);
    margin: 12px 0;
}

#ppcp-recaptcha-v2-container:empty {
    display: none !important;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .single-product .sat-single-product__summary.summary.entry-summary {
        padding: 16px;
    }
    
    .single-product .product_title.entry-title {
        font-size: 1.75rem;
    }
    
    .single-product form.cart {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    
    .single-product form.cart .quantity {
        align-self: flex-start;
        margin-right: 0;
    }
    
    .single-product form.cart .single_add_to_cart_button.button.alt {
        width: 100%;
    }
}

@media (prefers-contrast: high) {
    .single-product .sat-single-product__summary.summary.entry-summary,
    .single-product .woocommerce-product-details__short-description,
    .single-product form.cart,
    .single-product .product_meta {
        border-width: 2px;
    }
}

@media (prefers-color-scheme: dark) {
    .single-product .sat-single-product__summary.summary.entry-summary,
    .single-product .woocommerce-product-details__short-description,
    .single-product form.cart,
    .single-product .product_meta {
        background: #0f172a;
        border-color: rgba(226, 232, 240, 0.18);
        color: #cbd5e1;
    }
    
    .single-product .woocommerce-product-details__short-description p {
        color: #cbd5e1;
    }
    
    .single-product .product_title.entry-title {
        color: #f1f5f9;
    }
}

.single-product .woocommerce div.product .woocommerce-tabs {
    grid-column: 1 / -1;
    margin-top: 20px;
    position: relative;
    z-index: 1;
}

.single-product .woocommerce div.product .woocommerce-tabs.wc-tabs-wrapper {
    padding: 0;
}

.single-product .woocommerce div.product .woocommerce-tabs ul.tabs {
    margin: 0 0 14px 0;
    padding: 0;
    border: none;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.single-product .woocommerce div.product .woocommerce-tabs ul.tabs::before,
.single-product .woocommerce div.product .woocommerce-tabs ul.tabs::after {
    display: none !important;
}

.single-product .woocommerce div.product .woocommerce-tabs ul.tabs li {
    border: none;
    background: transparent;
    margin: 0;
    padding: 0;
}

.single-product .woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.single-product .woocommerce div.product .woocommerce-tabs ul.tabs li::after {
    display: none !important;
}

.single-product .woocommerce div.product .woocommerce-tabs ul.tabs.wc-tabs {
    border: 0 !important;
}

.single-product .woocommerce div.product .woocommerce-tabs ul.tabs.wc-tabs li {
    border: 0 !important;
    background: transparent !important;
}

.single-product .woocommerce div.product .woocommerce-tabs ul.tabs.wc-tabs li.active {
    border: 0 !important;
    background: transparent !important;
}

.single-product .woocommerce div.product .woocommerce-tabs ul.tabs li a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 42px;
    padding: 0 16px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--secondary-color);
    color: var(--primary-color);
    font-weight: 700;
    text-decoration: none;
}

.single-product .woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
    border-color: var(--accent-color);
    color: var(--accent-color);
    box-shadow: 0 6px 18px rgba(49, 130, 206, 0.14);
}

.single-product .woocommerce div.product .woocommerce-tabs .panel {
    background: #fff;
    border: 1px solid #edf2f7;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.06);
    margin: 0 0 16px 0;
    position: relative;
    z-index: 1;
}

.single-product .woocommerce div.product .woocommerce-tabs .panel h2 {
    margin-top: 0;
    margin-bottom: 14px;
    font-size: 1.4rem;
}

.single-product .woocommerce div.product .woocommerce-tabs .panel > h2:first-child {
    display: none;
}

.single-product .woocommerce div.product .woocommerce-tabs .panel p {
    margin: 0 0 12px 0;
}

.single-product .woocommerce div.product .woocommerce-tabs .panel p:last-child {
    margin-bottom: 0;
}

.single-product .woocommerce div.product .woocommerce-tabs .panel ul,
.single-product .woocommerce div.product .woocommerce-tabs .panel ol {
    list-style: disc;
    margin: 10px 0 0 18px;
    padding: 0;
}

.single-product .woocommerce div.product .woocommerce-tabs .panel li {
    margin: 6px 0;
}

.single-product .woocommerce div.product .woocommerce-tabs #reviews #comments,
.single-product .woocommerce div.product .woocommerce-tabs #reviews #review_form_wrapper {
    margin-top: 16px;
}

.single-product .woocommerce div.product .woocommerce-tabs #reviews #comments ol.commentlist {
    margin: 0;
    padding: 0;
}

.single-product .woocommerce div.product .woocommerce-tabs #reviews #comments ol.commentlist li {
    margin: 0 0 14px 0;
    padding: 14px;
    border: 1px solid #edf2f7;
    border-radius: 12px;
    background: #fff;
}

.single-product .woocommerce div.product .woocommerce-tabs #reviews #comments ol.commentlist li:last-child {
    margin-bottom: 0;
}

.single-product .woocommerce div.product .woocommerce-tabs #review_form .comment-form input,
.single-product .woocommerce div.product .woocommerce-tabs #review_form .comment-form textarea {
    border: 1px solid var(--secondary-color);
    border-radius: 10px;
    background: #fff;
}

.single-product .woocommerce div.product .woocommerce-tabs #review_form #submit {
    height: 44px;
    padding: 0 22px;
    border-radius: 999px;
    background-color: var(--accent-color);
    color: var(--white);
    border: none;
    font-weight: 700;
    box-shadow: 0 6px 18px rgba(49, 130, 206, 0.25);
}

.single-product .woocommerce div.product .related.products {
    grid-column: 1 / -1;
    margin-top: 20px;
    padding: 0;
    background: transparent;
    position: relative;
    z-index: 1;
}

.single-product .woocommerce div.product .related.products > h2 {
    text-align: left;
    margin: 0 0 18px 0;
    font-size: 1.8rem;
    font-weight: 800;
}

.single-product .woocommerce div.product .related.products ul.products {
    margin-top: 0 !important;
}

@media (max-width: 992px) {
    .single-product .woocommerce div.product .sat-single-product__main {
        grid-template-columns: 1fr;
        gap: 22px;
    }
}

@media (max-width: 768px) {
    .single-product .container.section {
        padding-top: 40px;
        padding-bottom: 60px;
    }
}

/* Checkout Layout */
.woocommerce-checkout .woocommerce {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 30px;
    align-items: start;
}

/* Make form children participate in the main grid */
form.checkout.woocommerce-checkout {
    display: contents;
}

/* Notices - Full Width Top */
.woocommerce-notices-wrapper {
    grid-column: 1 / -1;
    grid-row: 1;
    width: 100%;
}

/* Left Column - Billing Details */
#customer_details {
    grid-column: 1;
    grid-row: 2 / span 10; /* Span enough rows */
    background: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    width: 100%;
    align-self: start;
}

.woocommerce-checkout .col2-set {
    display: flex; /* Use flex to control children */
    flex-direction: column; /* Force vertical stacking */
    float: none;
    width: 100%;
}

.woocommerce-checkout .col-1, 
.woocommerce-checkout .col-2,
.woocommerce .col2-set .col-1, 
.woocommerce-page .col2-set .col-1,
.woocommerce .col2-set .col-2, 
.woocommerce-page .col2-set .col-2 {
    max-width: 100%;
    flex: 0 0 100%;
    width: 100% !important; /* Ensure full width overrides default 48% */
    padding: 0; 
    float: none !important; /* Disable floats overrides default */
    margin: 0;
}

/* 
   Robust Grid System for Billing Fields 
   Uses CSS Grid to automatically handle field alignment and dynamic ordering
*/

.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two equal columns */
    column-gap: 20px;
    row-gap: 15px;
}

/* Reset all fields to play nice with Grid */
.woocommerce form .form-row {
    width: auto !important;
    float: none !important;
    margin: 0 !important;
    clear: none !important;
}

/* Full Width Fields */
#billing_company_field,
#billing_country_field,
#billing_address_1_field,
#billing_address_2_field,
#billing_state_field, /* Default to full width if needed, or let it flow? See below */
#order_comments_field {
    grid-column: 1 / -1; /* Span all columns */
}

/* Override State to be half-width if we want it side-by-side with City/Postcode */
/* However, "State" length varies wildly. Keeping it full width is safest for design consistency unless it's a short dropdown */
/* The user previously asked for State to be 50%. Let's make it span 1 column. */
#billing_state_field {
    grid-column: auto; /* Takes 1 cell */
}

/* Explicitly force full width on Address fields */
#billing_address_1_field,
#billing_address_2_field,
#billing_company_field,
#billing_country_field,
#order_comments_field {
    grid-column: 1 / -1;
}

/* Ensure Name, City, Postcode, State, Phone, Email take 1 column (default) */
/* No CSS needed as grid-column: auto is default */

/* Input Styles - Black Border Request */
.woocommerce-checkout input.input-text,
.woocommerce-checkout select,
.woocommerce-checkout textarea {
    border: 1px solid #000 !important; /* Force black border as requested */
    border-radius: 4px;
    padding: 10px;
    height: 48px; /* Consistent height */
    box-sizing: border-box;
}

.woocommerce-checkout textarea {
    height: auto;
}

/* Responsive Fallback */
@media (max-width: 600px) {
    .woocommerce-billing-fields__field-wrapper,
    .woocommerce-shipping-fields__field-wrapper {
        grid-template-columns: 1fr; /* Single column on mobile */
    }
}

/* Hide "Additional Information" heading */
.woocommerce-additional-fields h3 {
    display: none;
}

.woocommerce-additional-fields {
    margin-top: 20px;
}

/* Coupon Section Styling - Grid Positioned */
.woocommerce-checkout .woocommerce-form-coupon-toggle {
    grid-column: 2;
    grid-row: 3;
    background: #fff;
    padding: 0 30px;
    margin-bottom: 0;
    /* Side shadows only to connect with Heading and Review */
    box-shadow: 5px 0 15px rgba(0,0,0,0.05), -5px 0 15px rgba(0,0,0,0.05);
    z-index: 2;
}

.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info {
    background-color: #f8fafc;
    border-top: none;
    padding: 15px;
    margin-bottom: 10px;
    color: var(--text-color);
    border-radius: 5px;
    border: 1px dashed var(--accent-color); /* Dashed border for coupon feel */
    font-size: 0.9rem;
    position: relative;
    padding-left: 20px; /* Reset padding if icon was forcing it */
}

/* Remove default overlapping icon */
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info::before {
    display: none;
}

.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info a {
    color: var(--accent-color);
    font-weight: 600;
    text-decoration: none;
    margin-left: 5px;
}

.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info a:hover {
    text-decoration: underline;
}

/* Coupon Form */
.woocommerce-checkout form.checkout_coupon {
    grid-column: 2;
    grid-row: 4;
    border: 1px solid var(--secondary-color);
    padding: 20px;
    margin: 0 30px 10px 30px; /* Indent inside the card visual */
    margin-bottom: 10px;
    border-radius: 5px;
    background: #f8fafc;
    display: flex; /* Flex layout for input + button */
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    /* Ensure it sits on top of white background? No, we need a white bg behind it.
       We can't easily add a bg behind a grid item without a wrapper.
       We'll add a white background to the form itself, but keep the inner grey style?
       Actually, let's just give it a white background and remove the grey?
       Or keep as is. It will look like a grey box.
       To maintain the "Card" sides, we can add a pseudo element or box-shadow?
       Let's use a spread shadow to fill the sides white?
       box-shadow: 0 0 0 30px white;
       This is a hack but works if no overflow hidden.
    */
    box-shadow: 0 0 0 30px #fff, 5px 0 15px 30px rgba(0,0,0,0.05), -5px 0 15px 30px rgba(0,0,0,0.05);
    /* Clip the top and bottom shadow? 
       This is getting complicated.
       Let's stick to simple layout first.
       If it looks disjointed, we can fix.
    */
    box-shadow: none; /* Reset for now, maybe add white border? */
    /* Let's try to make the form FULL WIDTH of the column but with internal margins? */
    width: auto;
}

/* Fix Coupon Form Width to match Card */
.woocommerce-checkout form.checkout_coupon {
    margin: 0;
    padding: 20px 30px;
    background: #fff; /* Match card bg */
    border: none;
    border-radius: 0;
    box-shadow: 5px 0 15px rgba(0,0,0,0.05), -5px 0 15px rgba(0,0,0,0.05);
}

/* Inner wrapper for grey box? 
   We can't change HTML.
   So we style the FORM as the White Container.
   And we style the Paragraph inside?
   
   Let's just make the form look like the container.
   And the inputs are inside.
*/


.woocommerce-checkout form.checkout_coupon p {
    margin-bottom: 0;
    flex: 1; /* Input takes available space */
}

.woocommerce-checkout form.checkout_coupon .form-row {
    margin-bottom: 0;
    width: auto;
    float: none;
}

.woocommerce-checkout form.checkout_coupon .form-row-first {
    flex-grow: 1;
    width: auto;
    margin-right: 0;
}

.woocommerce-checkout form.checkout_coupon .form-row-last {
    width: auto;
    float: none;
}

/* Coupon Input */
.woocommerce-checkout form.checkout_coupon input.input-text {
    width: 100%;
    height: 48px; /* Fixed height matching button */
    padding: 0 15px;
    border: 1px solid var(--accent-color); /* Blue border for input as shown */
    border-radius: 5px;
    box-sizing: border-box;
    line-height: normal;
}

/* Coupon Button */
.woocommerce-checkout form.checkout_coupon button[type="submit"] {
    background-color: var(--primary-color); /* Dark/Black background */
    color: #fff;
    width: auto;
    height: 48px; /* Match input height */
    padding: 0 25px;
    font-size: 1rem;
    border-radius: 5px;
    border: none;
    font-weight: 600;
    cursor: pointer;
    line-height: 48px; /* Vertically center text */
    margin-top: 0; /* Remove default margins */
}

.woocommerce-checkout form.checkout_coupon button[type="submit"]:hover {
    background-color: #000;
    transform: translateY(-1px);
}

/* Responsive Coupon Form */
@media (max-width: 480px) {
    .woocommerce-checkout form.checkout_coupon {
        flex-direction: column;
        align-items: stretch;
    }
    
    .woocommerce-checkout form.checkout_coupon .form-row-first,
    .woocommerce-checkout form.checkout_coupon .form-row-last {
        width: 100%;
    }
    
    .woocommerce-checkout form.checkout_coupon button[type="submit"] {
        width: 100%;
    }
}

/* Responsive Grid Fix */
@media (max-width: 900px) {
    .woocommerce-checkout .woocommerce {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    form.checkout.woocommerce-checkout {
        display: contents; /* Keep contents to maintain grid flow */
    }

    #customer_details {
        grid-column: 1;
        grid-row: auto;
    }

    #order_review_heading,
    .woocommerce-checkout .woocommerce-form-coupon-toggle,
    .woocommerce-checkout form.checkout_coupon,
    .woocommerce-checkout #order_review {
        grid-column: 1;
        grid-row: auto; /* Let them stack naturally */
        width: 100%;
        margin-top: 0; /* Reset negative margins for stack */
    }

    /* Adjust padding/shadows for mobile stack if needed */
    #order_review_heading {
        margin-top: 30px;
        border-radius: 8px 8px 0 0;
    }

    /* Keep card look connected */
    .woocommerce-checkout .woocommerce-form-coupon-toggle,
    .woocommerce-checkout form.checkout_coupon {
        margin-top: 0;
    }

    .woocommerce-checkout #order_review {
        margin-top: 0;
    }
}

/* Headings */
#customer_details h3, 
#order_review_heading {
   
    margin-bottom: 25px;
    color: var(--primary-color);
    font-weight: 700;
    border-bottom: 1px solid var(--secondary-color);
    padding-bottom: 15px;
    margin-top: 0;
    width: 100%;
}

/* Right Column - Order Review Heading */
#order_review_heading {
    grid-column: 2;
    grid-row: 2;
    display: block; 
    align-self: start;
    margin-top: 0;
    
    /* Card Header Style */
    background: #fff;
    padding: 30px 30px 10px 30px;
    margin-bottom: 0;
    border-radius: 8px 8px 0 0;
    border-bottom: none;
    /* Top and Side Shadows */
    box-shadow: 0 -5px 15px rgba(0,0,0,0.02), 5px 0 15px rgba(0,0,0,0.02), -5px 0 15px rgba(0,0,0,0.02);
    z-index: 2; /* Ensure on top */
    position: relative;
}

/* Coupon Section Styling - Hidden as requested */
.woocommerce-checkout .woocommerce-form-coupon-toggle,
.woocommerce-checkout form.checkout_coupon {
    display: none !important;
}

/* Order Review Container (Card Style) */
.woocommerce-checkout #order_review {
    grid-column: 2;
    grid-row: 3; /* Moved up to follow Heading immediately */
    float: none;
    width: 100%;
    background: #fff;
    padding: 10px 30px 30px 30px; /* Connect to above */
    margin-top: -30px; /* Collapse Grid Gap (default gap is 30px) */
    border-radius: 0 0 8px 8px; /* Bottom corners */
    /* Bottom and Side Shadows */
    box-shadow: 0 5px 15px rgba(0,0,0,0.02), 5px 0 15px rgba(0,0,0,0.02), -5px 0 15px rgba(0,0,0,0.02);
    height: fit-content;
    position: relative;
    align-self: start;
}

/* Form Fields */
.woocommerce form .form-row {
    margin-bottom: 20px;
    padding: 0;
}

.woocommerce form .form-row label {
    font-size: 0.9rem;
    margin-bottom: 8px;
    color: var(--text-color);
    font-weight: 600;
    display: block;
}

.woocommerce form .form-row input.input-text, 
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
    padding: 12px;
    border: 1px solid var(--secondary-color);
    border-radius: 5px;
    background: #f8fafc;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--text-color);
    width: 100%;
    box-sizing: border-box;
    min-height: 48px;
    transition: border-color 0.3s;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
    outline: none;
    border-color: var(--accent-color);
    background: #fff;
}

/* Payment Section */
.woocommerce-checkout #payment {
    background: transparent;
    border-radius: 0;
    padding: 0;
    margin-top: 30px;
}

.woocommerce-checkout #payment ul.payment_methods {
    border-bottom: none;
    padding: 0;
    margin: 0;
}

.woocommerce-checkout #payment ul.payment_methods li {
    list-style: none;
    margin-bottom: 15px;
}

.woocommerce-checkout #payment ul.payment_methods li input {
    margin-right: 10px;
    accent-color: var(--accent-color);
}

.woocommerce-checkout #payment ul.payment_methods li label {
    font-weight: 600;
    color: var(--primary-color);
    cursor: pointer;
    margin-bottom: 5px;
    display: inline-flex;
    align-items: center;
}

/* Payment Icons (if any added via plugins or custom) */
.woocommerce-checkout #payment ul.payment_methods li label img {
    margin-left: 10px;
    max-height: 24px;
}

.woocommerce-checkout #payment div.payment_box {
    background-color: var(--white); /* Changed to match desc style in html */
    color: var(--text-light);
    font-size: 0.9rem;
    padding:0px; /* Indent like HTML */
    margin: 5px 0 10px 0;
    border-radius: 0;
    border: none;
    line-height: 1.5;
}

.woocommerce-checkout #payment div.payment_box::before {
    display: none; /* Remove triangle */
}

/* Place Order Button */
.woocommerce #payment #place_order {
    width: 100%;
    padding: 18px;
    background-color: var(--accent-color);
    color: #fff;
    border: none;
    border-radius: 5px;
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-top: 20px;
    cursor: pointer;
    transition: all 0.3s;
    letter-spacing: 0.5px;
}

.woocommerce #payment #place_order:hover {
    background-color: var(--accent-hover);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(5, 84, 242, 0.3);
}

/* Order Table */
.woocommerce-checkout table.shop_table {
    border: none;
    border-radius: 0;
    margin-bottom: 30px;
    width: 100%;
    border-collapse: collapse;
}

.woocommerce-checkout table.shop_table th,
.woocommerce-checkout table.shop_table td {
    padding: 15px 0;
    border-top: none;
    border-bottom: 1px solid #edf2f7;
    text-align: left; /* Align left per HTML */
}

.woocommerce-checkout table.shop_table th {
    color: var(--text-light);
    font-weight: 600;
    font-size: 0.9rem;
}

.woocommerce-checkout table.shop_table td {
    color: var(--text-color);
    font-weight: 500;
}

.woocommerce-checkout table.shop_table td.product-total,
.woocommerce-checkout table.shop_table th.product-total {
    text-align: right; /* Right align totals */
}

.woocommerce-checkout table.shop_table .product-name {
    color: var(--primary-color);
}

.woocommerce-checkout table.shop_table .order-total th,
.woocommerce-checkout table.shop_table .order-total td {
    border-bottom: none;
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--primary-color);
}

/* Privacy Policy Text */
.woocommerce-privacy-policy-text {
    font-size: 0.85rem;
    color: var(--text-light);
    margin-bottom: 20px;
    line-height: 1.5;
}

.woocommerce-privacy-policy-text a {
    color: var(--accent-color);
    text-decoration: none;
}

/* Responsive */
@media (max-width: 900px) {
    form.checkout.woocommerce-checkout {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    #customer_details {
        grid-column: 1;
        grid-row: 1; /* Billing first */
    }
    
    /* If heading is moved inside, this wrapper handles it */
    #order_review_heading {
        grid-column: 1;
        grid-row: 2; 
        margin-top: 30px;
    }

    .woocommerce-checkout #order_review {
        grid-column: 1;
        grid-row: 3;
        margin-bottom: 30px;
    }
    
    /* If heading is INSIDE #order_review via JS, simply: */
    .woocommerce-checkout #order_review {
        grid-row: 2; /* Just after billing */
        margin-top: 30px;
    }
}

/* Responsive */
@media (max-width: 992px) {
    .features-grid,
    .products-grid,
    ul.products {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .about-container {
        grid-template-columns: 1fr;
    }
    
    .about-image {
        order: -1;
    }

    .hero-container {
        flex-direction: column;
        text-align: center;
        padding-top: 20px;
    }

    .hero-text {
        text-align: center;
        margin-right: 0;
    }

    .hero-card {
        width: 100%;
        max-width: 500px;
    }

    .woocommerce-checkout .col2-set,
    .woocommerce-checkout #order_review_heading,
    .woocommerce-checkout #order_review {
        float: none;
        width: 100%;
    }
}

@media (max-width: 768px) {
    .top-bar {
        display: none;
    }

    .navbar {
        top: 0;
    }

    body {
        padding-top: 0;
    }

    html {
        scroll-padding-top: var(--nav-height);
    }

    .menu-toggle {
        display: flex;
        z-index: 1001;
    }
    
    .menu-toggle.is-active .bar:nth-child(2) {
        opacity: 0;
    }
    
    .menu-toggle.is-active .bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }
    
    .menu-toggle.is-active .bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    .nav-links {
        position: fixed;
        top: 0;
        right: -100%;
        width: 80%;
        height: 100vh;
        background-color: var(--white);
        flex-direction: column;
        justify-content: center;
        box-shadow: -5px 0 15px rgba(0,0,0,0.1);
        transition: right 0.3s ease-in-out;
        padding: 40px;
        z-index: 999;
    }

    .nav-links.active {
        right: 0;
    }

    .nav-links li {
        margin: 20px 0;
    }

    .nav-links a {
        font-size: 1.2rem;
    }

    .hero {
        padding-top: 100px;
    }

    .hero-text h1 {
        font-size: 2.5rem;
    }
    
    .products-grid,
    ul.products,
    .contact-grid,
    .footer-grid {
        grid-template-columns: 1fr;
    }

    .container.section {
        margin-top: 20px;
    }
}

/* Checkout Remove Item Button */
.remove-cart-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: #f1f5f9; /* Slate 100 */
    color: transparent !important; /* Hide text */
    font-size: 0;
    margin-left: 10px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none !important;
    position: relative;
    border: 1px solid transparent;
    cursor: pointer;
}

/* Trash Icon using pseudo-element and mask */
.remove-cart-item::before {
    content: '';
    width: 16px;
    height: 16px;
    background-color: #64748b; /* Slate 500 */
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16"><path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z"/><path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"/></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16"><path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z"/><path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"/></svg>');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    transition: background-color 0.2s;
}

.remove-cart-item:hover {
    background-color: #fee2e2;
    border-color: #fecaca;
    transform: scale(1.05);
    box-shadow: 0 2px 5px rgba(239, 68, 68, 0.15);
}

.remove-cart-item:hover::before {
    background-color: #ef4444;
}

.remove-cart-item:focus {
    outline: 2px solid #ef4444;
    outline-offset: 2px;
}

.remove-cart-item.loading {
    opacity: 0.7;
    pointer-events: none;
    cursor: wait;
    background-color: #f1f5f9 !important;
    transform: none !important;
    box-shadow: none !important;
}

.remove-cart-item.loading::before {
    -webkit-mask-image: none;
    mask-image: none;
    width: 16px;
    height: 16px;
    border: 2px solid #cbd5e1;
    border-top-color: #64748b;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    background-color: transparent;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* WooCommerce Notices Wrapper - 购物车通知弹窗美化 (右下角 Toast 风格) */
/* 注意：此处的 top 值会被主题选项中的“弹窗顶部距离”覆盖 */
.woocommerce-notices-wrapper {
    position: fixed;
    top: auto !important; /* Force override */
    bottom: 30px;
    right: 30px;
    left: auto;
    transform: none;
    z-index: 9999;
    max-width: 400px;
    width: 100%;
    pointer-events: none; /* Allow clicking through wrapper */
}

/* Animation: Slide in from Right */
@keyframes slideInRightFade {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
    pointer-events: auto;
    background: #ffffff;
    border: none; /* No border */
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 15px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); /* Floating shadow */
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 15px;
    font-size: 0.95rem;
    color: var(--text-color);
    line-height: 1.5;
    animation: slideInRightFade 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    width: 100%;
    box-sizing: border-box;
}

/* Ensure text doesn't overlap icon */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
    margin-right: 0; /* Handled by gap */
    position: static; /* Ensure not absolute */
}

/* Success Message specific */
.woocommerce-message::before {
    content: '\f00c'; /* Check icon */
    color: #10b981;
    background: transparent; /* Remove circle background */
    font-size: 1.2rem; /* Slightly larger icon */
}

/* Info Message specific */
.woocommerce-info::before {
    content: '\f129'; /* Info icon */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: var(--accent-color);
    background: transparent;
    font-size: 1.2rem;
}

/* Error Message specific */
.woocommerce-error {
    list-style: none;
}

.woocommerce-error::before {
    content: '\f00d'; /* X icon */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: #ef4444;
    background: transparent;
    font-size: 1.2rem;
}

/* Common Icon Style */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto; /* Auto width */
    height: auto;
    border-radius: 0;
    margin-right: 0; /* Handled by gap */
}

/* Button inside Toast - Link Style */
.woocommerce-message a.button.wc-forward,
.woocommerce-error a.button.wc-forward,
.woocommerce-info a.button.wc-forward {
    background-color: transparent;
    color: var(--accent-color) !important;
    padding: 0;
    border: none;
    border-radius: 0;
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: none;
    flex-shrink: 0;
    margin-left: auto; /* Push to far right */
    display: inline-block;
    white-space: nowrap;
}

.woocommerce-message a.button.wc-forward:hover,
.woocommerce-error a.button.wc-forward:hover,
.woocommerce-info a.button.wc-forward:hover {
    background-color: transparent;
    color: var(--accent-hover) !important;
    transform: none;
    box-shadow: none;
    text-decoration: underline;
}

/* Close Button (added via JS) */
.notice-close {
    position: absolute;
    top: 5px;
    right: 5px;
    background: transparent;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    font-size: 1.1rem;
    padding: 5px;
    line-height: 1;
    transition: color 0.2s;
    width: auto;
    height: auto;
}

.notice-close::before {
    content: '\f00d'; /* Times icon */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
}

.notice-close:hover {
    color: var(--text-color);
}

/* Mobile Responsive */
@media (max-width: 480px) {
    .woocommerce-notices-wrapper {
        bottom: 20px;
        right: 20px;
        left: 20px;
        width: auto;
        max-width: none;
    }
}





/* 产品容器基础样式 */
.single-product .sat-single-product__summary.summary.entry-summary {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    background: var(--white);
    border-radius: 12px;
    padding: 22px;
    border: 1px solid var(--secondary-color);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.06);
    position: relative;
}

.single-product .sat-single-product__summary::before {
    display: none;
    content: '';
}

/* 产品标题样式 */
.single-product .product_title.entry-title {
    font-size: 2.1rem;
    font-weight: 800;
    color: var(--primary-color);
    margin: 0 0 12px 0;
    letter-spacing: -0.4px;
    line-height: 1.2;
}

/* 价格样式 */
.single-product .summary .price {
    display: inline-block;
    margin: 0 0 14px 0;
    padding: 0;
    color: var(--accent-color);
    background: none;
    -webkit-text-fill-color: currentColor;
}

.single-product .summary .price .woocommerce-Price-amount {
    font-size: 1.85rem;
    font-weight: 800;
}

.single-product .summary .price .woocommerce-Price-currencySymbol {
    font-size: 1.2rem;
    vertical-align: top;
    margin-right: 2px;
}

/* 产品描述区域 */
.single-product .woocommerce-product-details__short-description {
    background: var(--white);
    padding: 16px;
    border-radius: 10px;
    margin: 16px 0;
    border: 1px solid var(--secondary-color);
    box-shadow: none;
}

.single-product .woocommerce-product-details__short-description p {
    color: var(--text-light);
    line-height: 1.75;
    font-size: 1rem;
    margin: 0 0 12px 0;
}

.single-product .woocommerce-product-details__short-description p:last-child {
    margin-bottom: 0;
}

/* 表单容器 */
.single-product form.cart {
    background: var(--white);
    padding: 16px;
    border-radius: 10px;
    margin: 16px 0;
    border: 1px solid var(--secondary-color);
    box-shadow: none;
}

.single-product form.cart:not(.variations_form):not(.grouped_form) {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* 数量选择器样式 */
.single-product form.cart .quantity {
    display: inline-flex;
    align-items: center;
    background: #f8fafc;
    border-radius: 10px;
    padding: 3px;
    margin-right: 12px;
    border: 1px solid var(--secondary-color);
}

.single-product form.cart:not(.variations_form):not(.grouped_form) .quantity {
    margin-right: 0;
}

.single-product form.cart .quantity:hover {
    border-color: var(--accent-color);
}

.single-product form.cart .sat-qty-btn {
    background: var(--white);
    border: 1px solid var(--secondary-color);
    width: 34px;
    height: 34px;
    border-radius: 8px;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--accent-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.single-product form.cart .sat-qty-btn:hover {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: var(--white);
    transform: none;
}

.single-product form.cart .sat-qty-btn:active {
    transform: none;
}

.single-product form.cart .qty.text {
    width: 56px;
    height: 34px;
    border: none;
    background: transparent;
    text-align: center;
    font-size: 1rem;
    font-weight: 700;
    color: var(--primary-color);
    margin: 0 4px;
    -moz-appearance: textfield;
}

.single-product form.cart .qty.text::-webkit-outer-spin-button,
.single-product form.cart .qty.text::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* 加入购物车按钮样式 */
.single-product form.cart .single_add_to_cart_button.button.alt {
    background: var(--accent-color);
    color: var(--white);
    border: none;
    padding: 12px 22px;
    border-radius: 10px;
    font-size: 1.05rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    letter-spacing: 0.2px;
    box-shadow: none;
}

.single-product form.cart .single_add_to_cart_button.button.alt:hover {
    background: var(--accent-hover);
    transform: translateY(-1px);
    box-shadow: none;
}

.single-product form.cart .single_add_to_cart_button.button.alt:active {
    transform: none;
}

.single-product form.cart .single_add_to_cart_button.button.alt.loading::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: var(--white);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-left: 10px;
}

/* 产品分类样式 */
.single-product .product_meta {
    background: var(--white);
    padding: 14px 16px;
    border-radius: 10px;
    margin-top: 16px;
    border: 1px solid var(--secondary-color);
    color: var(--text-light);
    font-size: 0.95rem;
}

.single-product .posted_in a {
    color: var(--accent-color);
    text-decoration: none;
    font-weight: 700;
}

.single-product .posted_in a:hover {
    text-decoration: underline;
}

/* Recaptcha 容器样式 */
.single-product #ppcp-recaptcha-v2-container {
    background: #f8fafc;
    padding: 12px;
    border-radius: 10px;
    border: 1px solid var(--secondary-color);
    margin: 12px 0;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .single-product .sat-single-product__summary.summary.entry-summary {
        padding: 16px;
    }
    
    .single-product .product_title.entry-title {
        font-size: 1.75rem;
    }
    
    .single-product form.cart {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    
    .single-product form.cart .quantity {
        align-self: flex-start;
        margin-right: 0;
    }
    
    .single-product form.cart .single_add_to_cart_button.button.alt {
        width: 100%;
    }
}

@media (prefers-contrast: high) {
    .single-product .sat-single-product__summary.summary.entry-summary,
    .single-product .woocommerce-product-details__short-description,
    .single-product form.cart,
    .single-product .product_meta {
        border-width: 2px;
    }
}

@media (prefers-color-scheme: dark) {
    .single-product .sat-single-product__summary.summary.entry-summary,
    .single-product .woocommerce-product-details__short-description,
    .single-product form.cart,
    .single-product .product_meta {
        background: #0f172a;
        border-color: rgba(226, 232, 240, 0.18);
        color: #cbd5e1;
    }
    
    .single-product .woocommerce-product-details__short-description p {
        color: #cbd5e1;
    }
    
    .single-product .product_title.entry-title {
        color: #f1f5f9;
    }
}










/* 重置WooCommerce默认样式 */
.single-product .woocommerce div.product .woocommerce-tabs ul.tabs,
.single-product .woocommerce #content div.product .woocommerce-tabs ul.tabs {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  border: none !important;
  background: none !important;
}

/* 标签页容器样式 - 增加特异性 */
.single-product .woocommerce div.product .woocommerce-tabs.wc-tabs-wrapper,
.single-product .woocommerce #content div.product .woocommerce-tabs.wc-tabs-wrapper {
  margin: 20px 0 !important;
  background: var(--white) !important;
  border: 1px solid var(--secondary-color) !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.06) !important;
  overflow: hidden !important;
}

/* 标签导航样式 - 增加特异性 */
.single-product .woocommerce div.product .woocommerce-tabs ul.tabs.wc-tabs,
.single-product .woocommerce #content div.product .woocommerce-tabs ul.tabs.wc-tabs {
  display: flex !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* 标签项样式 */
.single-product .woocommerce div.product .woocommerce-tabs ul.tabs.wc-tabs li,
.single-product .woocommerce #content div.product .woocommerce-tabs ul.tabs.wc-tabs li {
  margin: 0 !important;
  position: relative !important;
  border: none !important;
  background: none !important;
  padding: 0 !important;
}

/* 标签链接样式 */
.single-product .woocommerce div.product .woocommerce-tabs ul.tabs.wc-tabs li a,
.single-product .woocommerce #content div.product .woocommerce-tabs ul.tabs.wc-tabs li a {
  display: block !important;
  padding: 12px 16px !important;
  text-decoration: none !important;
  color: var(--text-light) !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  transition: color 0.2s ease, background-color 0.2s ease !important;
  position: relative !important;
  border: none !important;
  background: none !important;
}

/* 激活标签样式 */
.single-product .woocommerce div.product .woocommerce-tabs ul.tabs.wc-tabs li.active a,
.single-product .woocommerce #content div.product .woocommerce-tabs ul.tabs.wc-tabs li.active a {
  color: var(--accent-color) !important;
  background: var(--white) !important;
  box-shadow: none !important;
}

.single-product .woocommerce div.product .woocommerce-tabs ul.tabs.wc-tabs li.active::after,
.single-product .woocommerce #content div.product .woocommerce-tabs ul.tabs.wc-tabs li.active::after {
  content: '' !important;
  position: absolute !important;
  bottom: -1px !important;
  left: 0 !important;
  width: 100% !important;
  height: 2px !important;
  background: var(--accent-color) !important;
}

/* 悬停效果 */
.single-product .woocommerce div.product .woocommerce-tabs ul.tabs.wc-tabs li a:hover,
.single-product .woocommerce #content div.product .woocommerce-tabs ul.tabs.wc-tabs li a:hover {
  color: var(--accent-hover) !important;
  background: rgba(226, 232, 240, 0.35) !important;
}

/* 标签内容面板样式 */
.single-product .woocommerce div.product .woocommerce-Tabs-panel,
.single-product .woocommerce #content div.product .woocommerce-Tabs-panel {
  padding: 20px !important;
  border: none !important;
  background: var(--white) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
}


/* 重置WooCommerce默认样式 */
.sat-single-product__gallery,
.single-product .woocommerce div.product .sat-single-product__gallery {
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
}

/* 主图库容器样式 */
.single-product .woocommerce-product-gallery.woocommerce-product-gallery--with-images,
.single-product .woocommerce div.product .woocommerce-product-gallery.woocommerce-product-gallery--with-images {
  position: relative !important;
  background: var(--white) !important;
  border-radius: 12px !important;
  border: 1px solid var(--secondary-color) !important;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.06) !important;
  overflow: hidden !important;
}

/* 全屏查看按钮样式 */
.single-product .woocommerce-product-gallery__trigger,
.single-product .woocommerce div.product .woocommerce-product-gallery__trigger {
  display: none !important;
}

/* 图库包装容器 */
.single-product .woocommerce-product-gallery__wrapper,
.single-product .woocommerce div.product .woocommerce-product-gallery__wrapper {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 18px !important;
  background: #f8fafc !important;
}

/* 主图样式 */
.single-product .woocommerce-product-gallery__image,
.single-product .woocommerce div.product .woocommerce-product-gallery__image {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  max-width: 600px !important;
  margin: 0 auto !important;
}

.single-product .woocommerce-product-gallery__image a,
.single-product .woocommerce div.product .woocommerce-product-gallery__image a {
  display: block !important;
  overflow: hidden !important;
  border-radius: 10px !important;
}

.single-product .woocommerce-product-gallery__image img,
.single-product .woocommerce div.product .woocommerce-product-gallery__image img {
  width: 100% !important;
  height: auto !important;
  object-fit: cover !important;
  border-radius: 10px !important;
}

/* 缩略图样式 */
.single-product .woocommerce-product-gallery__image[data-thumb],
.single-product .woocommerce div.product .woocommerce-product-gallery__image[data-thumb] {
  cursor: pointer !important;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .single-product .woocommerce-product-gallery.woocommerce-product-gallery--with-images,
  .single-product .woocommerce div.product .woocommerce-product-gallery.woocommerce-product-gallery--with-images {
    border-radius: 12px !important;
  }
  
  .single-product .woocommerce-product-gallery__wrapper,
  .single-product .woocommerce div.product .woocommerce-product-gallery__wrapper {
    padding: 14px !important;
  }
  
  .single-product .woocommerce-product-gallery__image,
  .single-product .woocommerce div.product .woocommerce-product-gallery__image {
    max-width: 100% !important;
  }
}

@media (max-width: 480px) {
  .single-product .woocommerce-product-gallery__wrapper,
  .single-product .woocommerce div.product .woocommerce-product-gallery__wrapper {
    padding: 12px !important;
  }
}
/* 重置WooCommerce默认样式 */
.woocommerce div.product .woocommerce-tabs ul.tabs,
.woocommerce #content div.product .woocommerce-tabs ul.tabs {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  border: none !important;
  background: none !important;
}

/* 标签页容器样式 - 增加特异性 */
.woocommerce div.product .woocommerce-tabs.wc-tabs-wrapper,
.woocommerce #content div.product .woocommerce-tabs.wc-tabs-wrapper {
  margin: 50px 0 !important;
  background: white !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
  overflow: hidden !important;
}

/* 标签导航样式 - 增加特异性 */
.woocommerce div.product .woocommerce-tabs ul.tabs.wc-tabs,
.woocommerce #content div.product .woocommerce-tabs ul.tabs.wc-tabs {
  display: flex !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%) !important;
  border-bottom: 2px solid #e2e8f0 !important;
}

/* 标签项样式 */
.woocommerce div.product .woocommerce-tabs ul.tabs.wc-tabs li,
.woocommerce #content div.product .woocommerce-tabs ul.tabs.wc-tabs li {
  margin: 0 !important;
  position: relative !important;
  border: none !important;
  background: none !important;
  padding: 0 !important;
}

/* 标签链接样式 */
.woocommerce div.product .woocommerce-tabs ul.tabs.wc-tabs li a,
.woocommerce #content div.product .woocommerce-tabs ul.tabs.wc-tabs li a {
  display: block !important;
  padding: 18px 30px !important;
  text-decoration: none !important;
  color: #64748b !important;
  font-weight: 600 !important;
  font-size: 1.1rem !important;
  transition: all 0.3s ease !important;
  position: relative !important;
  border: none !important;
  background: none !important;
}

/* 激活标签样式 */
.woocommerce div.product .woocommerce-tabs ul.tabs.wc-tabs li.active a,
.woocommerce #content div.product .woocommerce-tabs ul.tabs.wc-tabs li.active a {
  color: #3b82f6 !important;
  background: white !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs.wc-tabs li.active::after,
.woocommerce #content div.product .woocommerce-tabs ul.tabs.wc-tabs li.active::after {
  content: '' !important;
  position: absolute !important;
  bottom: -2px !important;
  left: 0 !important;
  width: 100% !important;
  height: 3px !important;
  background: linear-gradient(135deg, #3b82f6, #8b5cf6) !important;
}

/* 悬停效果 */
.woocommerce div.product .woocommerce-tabs ul.tabs.wc-tabs li a:hover,
.woocommerce #content div.product .woocommerce-tabs ul.tabs.wc-tabs li a:hover {
  color: #2563eb !important;
  background: rgba(37, 99, 235, 0.05) !important;
}

/* 标签内容面板样式 */
.woocommerce div.product .woocommerce-Tabs-panel,
.woocommerce #content div.product .woocommerce-Tabs-panel {
  padding: 40px !important;
  display: none !important;
  animation: fadeIn 0.5s ease !important;
  border: none !important;
  background: white !important;
}

.woocommerce div.product .woocommerce-Tabs-panel[style*="display: block"],
.woocommerce #content div.product .woocommerce-Tabs-panel[style*="display: block"] {
  display: block !important;
}

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

/* 面板标题样式 */
.woocommerce div.product .woocommerce-Tabs-panel h2,
.woocommerce #content div.product .woocommerce-Tabs-panel h2 {
  color: #1e293b !important;
  font-size: 1.8rem !important;
  margin: 0 0 25px 0 !important;
  font-weight: 700 !important;
  position: relative !important;
  padding-bottom: 15px !important;
}

.woocommerce div.product .woocommerce-Tabs-panel h2::after,
.woocommerce #content div.product .woocommerce-Tabs-panel h2::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 60px !important;
  height: 3px !important;
  background: linear-gradient(135deg, #3b82f6, #8b5cf6) !important;
  border-radius: 3px !important;
}

/* 产品属性表格样式 */
.woocommerce div.product .woocommerce-product-attributes,
.woocommerce #content div.product .woocommerce-product-attributes {
  width: 100% !important;
  border-collapse: collapse !important;
  background: #f8fafc !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

.woocommerce div.product .woocommerce-product-attributes-item,
.woocommerce #content div.product .woocommerce-product-attributes-item {
  border-bottom: 1px solid #e2e8f0 !important;
}

.woocommerce div.product .woocommerce-product-attributes-item:last-child,
.woocommerce #content div.product .woocommerce-product-attributes-item:last-child {
  border-bottom: none !important;
}

.woocommerce div.product .woocommerce-product-attributes-item__label,
.woocommerce #content div.product .woocommerce-product-attributes-item__label {
  padding: 18px 25px !important;
  background: #f1f5f9 !important;
  font-weight: 600 !important;
  color: #334155 !important;
  width: 30% !important;
  border-right: 2px solid #e2e8f0 !important;
}

.woocommerce div.product .woocommerce-product-attributes-item__value,
.woocommerce #content div.product .woocommerce-product-attributes-item__value {
  padding: 18px 25px !important;
  background: white !important;
  color: #475569 !important;
  line-height: 1.6 !important;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .woocommerce div.product .woocommerce-tabs ul.tabs.wc-tabs,
  .woocommerce #content div.product .woocommerce-tabs ul.tabs.wc-tabs {
    flex-direction: column !important;
  }
  
  .woocommerce div.product .woocommerce-tabs ul.tabs.wc-tabs li a,
  .woocommerce #content div.product .woocommerce-tabs ul.tabs.wc-tabs li a {
    padding: 15px 20px !important;
    text-align: center !important;
  }
  
  .woocommerce div.product .woocommerce-tabs ul.tabs.wc-tabs li.active::after,
  .woocommerce #content div.product .woocommerce-tabs ul.tabs.wc-tabs li.active::after {
    width: 100% !important;
    height: 3px !important;
    bottom: 0 !important;
  }
  
  .woocommerce div.product .woocommerce-Tabs-panel,
  .woocommerce #content div.product .woocommerce-Tabs-panel {
    padding: 25px !important;
  }
  
  .woocommerce div.product .woocommerce-product-attributes-item__label,
  .woocommerce #content div.product .woocommerce-product-attributes-item__label {
    width: 40% !important;
  }
}

@media (max-width: 480px) {
  .woocommerce div.product .woocommerce-product-attributes-item__label,
  .woocommerce #content div.product .woocommerce-product-attributes-item__label,
  .woocommerce div.product .woocommerce-product-attributes-item__value,
  .woocommerce #content div.product .woocommerce-product-attributes-item__value {
    padding: 12px 15px !important;
    font-size: 0.9rem !important;
  }
  
  .woocommerce div.product .woocommerce-product-attributes-item__label,
  .woocommerce #content div.product .woocommerce-product-attributes-item__label {
    width: 50% !important;
  }
}





/* 增强版相关产品标题样式 */
.sat-single-product__details .related>h2 {
font-size: 18PX;
    color: #0f172a !important;
    padding: 0 0 25px 0 !important;
}


/* Product Learn More Link */
/* product-excerpt-text 样式已在上面定义，这里不需要重复 */

.product-learn-more {
    color: var(--accent-color);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    margin-left: 4px;
    transition: color 0.2s ease;
    cursor: pointer;
}

.product-learn-more:hover {
    color: var(--accent-hover);
    text-decoration: underline;
}

/* Product Description Modal */
.product-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
}

.product-modal-content {
    position: relative;
    background: #fff;
    border-radius: 16px;
    max-width: 600px;
    width: 90%;
    max-height: 80vh;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    z-index: 1;
    animation: modalSlideIn 0.15s ease-out;
    opacity: 0;
    transform: translateY(-10px) scale(0.98);
}

.product-modal[style*="flex"] .product-modal-content {
    opacity: 1;
    transform: translateY(0) scale(1);
    transition: opacity 0.15s ease-out, transform 0.15s ease-out;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-10px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.product-modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 36px;
    height: 36px;
    border: none;
    background: #f1f5f9;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: all 0.2s ease;
    color: #64748b;
    font-size: 18px;
}

.product-modal-close:hover {
    background: #e2e8f0;
    color: #334155;
    transform: rotate(90deg);
}

.product-modal-header {
    padding: 30px 30px 20px 30px;
    border-bottom: 1px solid #e2e8f0;
}

.product-modal-title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-color);
    line-height: 1.3;
}

.product-modal-body {
    padding: 25px 30px 30px 30px;
    overflow-y: auto;
    flex: 1;
}

.product-modal-short-desc {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e2e8f0;
}

.modal-short-desc-label,
.modal-full-desc-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.modal-short-desc-content {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-color);
}

.product-modal-description {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--text-color);
}

.modal-full-desc-content {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--text-color);
}

.product-modal-description p {
    margin: 0 0 15px 0;
}

.product-modal-description p:last-child {
    margin-bottom: 0;
}

.product-modal-description ul,
.product-modal-description ol {
    margin: 15px 0;
    padding-left: 25px;
}

.product-modal-description li {
    margin-bottom: 8px;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .product-modal-content {
        width: 95%;
        max-height: 85vh;
        border-radius: 12px;
    }
    
    .product-modal-header {
        padding: 20px 20px 15px 20px;
    }
    
    .product-modal-title {
        font-size: 1.25rem;
        padding-right: 40px;
    }
    
    .product-modal-body {
        padding: 20px;
    }
    
    .product-modal-close {
        top: 10px;
        right: 10px;
        width: 32px;
        height: 32px;
    }
}