/*
Theme Name: lite_commerce
Theme URI: 
Author: Rodysoft
Author URI: 
Description: A premium food delivery ecommerce theme for rodyshop with white, black and gold styling
Version: 1.0.0
License: GPL v2 or later
Text Domain: ecommerce_theme
*/

/* =============================================
   TABLE OF CONTENTS
   =============================================
   1. CSS Variables & Global Styles
   2. Header Styles
   3. Navigation
   4. Social Icons
   5. Cart Icon
   6. Main Content
   7. Footer
   8. Buttons
   9. Hero Banner
   10. Product Display
   11. Product Card Details
   12. Page & Post Headers
   13. Blog Cards
   14. Responsive Styles
   15. Variable Product Page
   16. Variation Styling
   17. Tabs & Panels
   18. Sale Badge
   19. Dropdown Menus
   20. My Account Page
   21. Login Page
   22. Search Forms
   23. Link Styling
   24. Sidebar Widgets
   25. Footer Widgets
   ============================================= */

/* =============================================
   1. CSS VARIABLES & GLOBAL STYLES
   ============================================= */
:root {
    --pure-white: #FFFFFF;
    --off-white: #FCFBF9;
    --rich-black: #1E1E1E;
    --soft-black: #2B2B2B;
    --classic-gold: #D4AF37;
    --antique-gold: #B4943C;
    --bright-gold: #FFD700;
}

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

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    color: var(--rich-black);
    background-color: var(--off-white);
    line-height: 1.6;
}

/* =============================================
   2. HEADER STYLES
   ============================================= */
.site-header {
    background-color: var(--pure-white);
    border-bottom: 3px solid var(--classic-gold);
    padding: 0.5rem 2rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 70px;
}

.site-branding {
    display: flex;
    align-items: center;
    line-height: 1;
}

.custom-logo-link {
    display: inline-block;
    line-height: 0;
}

.custom-logo {
    width: auto;
    height: auto;
    max-height: 60px;
    transition: all 0.3s ease;
}

.site-title {
    font-size: 1.8rem;
    font-weight: bold;
    margin: 0;
    line-height: 1;
}

.site-title a {
    color: var(--rich-black);
    text-decoration: none;
    display: inline-block;
    line-height: 1;
}

.site-title a:hover {
    color: var(--classic-gold);
}

.site-description {
    margin: 0 0 0 10px;
    font-size: 0.9rem;
    color: var(--soft-black);
    line-height: 1;
}

/* =============================================
   3. NAVIGATION
   ============================================= */
.main-navigation {
    display: flex;
    align-items: center;
    margin: 0;
}

.primary-menu {
    list-style: none;
    display: flex;
    gap: 2rem;
    margin: 0;
    padding: 0;
    align-items: center;
}

.primary-menu li {
    margin: 0;
    padding: 0;
}

.primary-menu a {
    color: var(--rich-black);
    text-decoration: none;
    font-weight: 500;
    padding: 0.5rem 0;
    position: relative;
    display: inline-block;
    line-height: 1;
}

.primary-menu a:hover {
    color: var(--classic-gold);
}

.primary-menu a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--classic-gold);
    transition: width 0.3s ease;
}

.primary-menu a:hover::after {
    width: 100%;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 20px;
}

.menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    z-index: 100;
    line-height: 1;
}

/* =============================================
   4. SOCIAL ICONS
   ============================================= */
.social-icons-header-left,
.social-icons-header-right,
.social-icons-below-header,
.social-icons-footer {
    display: flex;
    align-items: center;
}

.social-icons-wrapper {
    display: flex;
    gap: 15px;
    align-items: center;
}

.social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.3s ease;
    color: var(--social-color, #D4AF37);
    font-size: var(--social-size, 1.2rem);
    line-height: 1;
}

.social-icon:hover {
    color: var(--social-hover, #B4943C);
}

.fab {
    font-family: 'Font Awesome 6 Brands';
    font-weight: 400;
}

.menu-item-social {
    display: flex !important;
    align-items: center;
    padding: 0.5rem 1rem !important;
}

/* =============================================
   5. CART ICON
   ============================================= */
.menu-item-cart {
    display: flex;
    align-items: center;
    margin-left: 10px !important;
}

.menu-item-cart a {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0.5rem !important;
    line-height: 1;
}

.menu-item-cart .dashicons-cart {
    font-size: 1.3rem;
    width: auto;
    height: auto;
}

.cart-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    background: var(--primary-color, #D4AF37);
    color: var(--rich-black, #1E1E1E);
    font-size: 0.7rem;
    font-weight: bold;
    border-radius: 50%;
    padding: 0 3px;
    line-height: 1;
}

.cart-total {
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1;
}

/* =============================================
   6. MAIN CONTENT
   ============================================= */
.main-content {
    min-height: 60vh;
    padding: 2rem;
}

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

/* =============================================
   7. FOOTER
   ============================================= */
.site-footer {
    background-color: var(--rich-black);
    color: var(--pure-white);
    padding: 2rem;
    margin-top: 3rem;
    border-top: 3px solid var(--classic-gold);
}

.footer-credit {
    text-align: center;
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--soft-black);
}

/* =============================================
   8. BUTTONS
   ============================================= */
.btn {
    display: inline-block;
    padding: 0.8rem 1.8rem;
    border: none;
    border-radius: 4px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    line-height: 1;
}

.btn-gold {
    background: var(--classic-gold);
    color: var(--rich-black);
}

.btn-gold:hover {
    background: var(--antique-gold);
    color: var(--pure-white);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(180, 148, 60, 0.3);
}

.btn-black {
    background: var(--rich-black);
    color: var(--pure-white);
    border: 1px solid var(--classic-gold);
}

.btn-black:hover {
    background: var(--soft-black);
    border-color: var(--bright-gold);
}

/* =============================================
   9. HERO BANNER
   ============================================= */
.hero-banner {
    background: linear-gradient(135deg, var(--rich-black) 0%, var(--soft-black) 100%);
    color: var(--pure-white);
    padding: 4rem 2rem;
    text-align: center;
    border-radius: 8px;
    margin-bottom: 3rem;
    position: relative;
    overflow: hidden;
}

.hero-banner::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 300px;
    height: 300px;
    background: var(--classic-gold);
    opacity: 0.1;
    border-radius: 50%;
    transform: translate(100px, -100px);
}

.hero-banner::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 200px;
    height: 200px;
    background: var(--classic-gold);
    opacity: 0.1;
    border-radius: 50%;
    transform: translate(-50px, 50px);
}

.hero-title {
    font-size: 3rem;
    margin-bottom: 1rem;
    position: relative;
    z-index: 1;
}

.hero-title span {
    color: var(--classic-gold);
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.3);
}

.hero-subtitle {
    font-size: 1.2rem;
    margin-bottom: 2rem;
    opacity: 0.9;
    position: relative;
    z-index: 1;
}

/* =============================================
   10. PRODUCT DISPLAY
   ============================================= */
.posts-grid,
.products,
.woocommerce .products {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 25px !important;
    margin: 2rem auto !important;
    width: 100% !important;
}

.product-card,
.woocommerce .products li.product {
    flex: 0 0 calc(25% - 20px) !important;
    min-width: 250px !important;
    max-width: 300px !important;
    margin: 0 !important;
    position: relative;
    background: var(--pure-white, #FFFFFF);
    border-radius: 20px !important;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    border: 1px solid rgba(212, 175, 55, 0.1);
    display: flex;
    flex-direction: column;
}

.product-card:hover,
.woocommerce .products li.product:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(212, 175, 55, 0.15);
    border-color: var(--classic-gold, #D4AF37);
}

/* =============================================
   11. PRODUCT CARD DETAILS
   ============================================= */
.product-card .product-thumbnail,
.woocommerce .products li.product a img {
    position: relative;
    width: 100%;
    height: 280px;
    object-fit: cover;
    border-radius: 20px 20px 0 0;
    transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.product-card:hover .product-thumbnail img,
.woocommerce .products li.product:hover img {
    transform: scale(1.05);
}

.product-card .product-thumbnail::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(212,175,55,0.1) 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
    border-radius: 20px 20px 0 0;
}

.product-card:hover .product-thumbnail::after {
    opacity: 1;
}

.product-card .product-content,
.woocommerce .products li.product .product-info {
    padding: 25px 20px 30px 20px;
    background: var(--pure-white, #FFFFFF);
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.product-card .product-title,
.woocommerce .products li.product h2 {
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0 0 10px 0;
    line-height: 1.4;
    color: var(--rich-black, #1E1E1E);
    padding: 0 5px;
}

.product-card .product-title a,
.woocommerce .products li.product h2 a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s ease;
}

.product-card .product-title a:hover,
.woocommerce .products li.product h2 a:hover {
    color: var(--classic-gold, #D4AF37);
}

.product-card .product-price,
.woocommerce .products li.product .price {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--classic-gold, #D4AF37);
    margin: 5px 0 15px 0;
    padding: 0 5px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.product-card .product-price del,
.woocommerce .products li.product .price del {
    color: var(--soft-black, #2B2B2B);
    font-size: 1rem;
    font-weight: 400;
    opacity: 0.7;
    margin-right: 8px;
}

.product-card .product-price ins,
.woocommerce .products li.product .price ins {
    text-decoration: none;
    color: var(--classic-gold, #D4AF37);
    font-weight: 700;
    margin-right: 5px;
}

.product-card .product-rating,
.woocommerce .products li.product .star-rating {
    color: var(--classic-gold, #D4AF37);
    margin: 5px 0 10px 0;
    padding: 0 5px;
    font-size: 0.9rem;
}

.star-rating {
    color: var(--classic-gold, #D4AF37) !important;
}

.star-rating span::before {
    color: var(--classic-gold, #D4AF37) !important;
}

.product-card .add_to_cart_button,
.product-card .product_type_simple,
.product-card .product_type_variable,
.product-card .product_type_grouped,
.product-card .product_type_external,
.woocommerce .products li.product .button,
.woocommerce .products li.product .add_to_cart_button {
    display: inline-block;
    width: calc(100% - 20px);
    margin: 10px auto 0 auto;
    padding: 14px 20px;
    background: linear-gradient(135deg, var(--rich-black, #1E1E1E), var(--soft-black, #2B2B2B));
    color: var(--pure-white, #FFFFFF);
    border: none;
    border-radius: 50px;
    font-size: 0.95rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    z-index: 1;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    line-height: 1;
}

.product-card .add_to_cart_button::before,
.product-card .product_type_simple::before,
.woocommerce .products li.product .button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--classic-gold, #D4AF37), var(--bright-gold, #FFD700));
    transition: left 0.4s ease;
    z-index: -1;
}

.product-card .add_to_cart_button:hover::before,
.product-card .product_type_simple:hover::before,
.woocommerce .products li.product .button:hover::before {
    left: 0;
}

.product-card .add_to_cart_button:hover,
.product-card .product_type_simple:hover,
.woocommerce .products li.product .button:hover {
    color: var(--rich-black, #1E1E1E);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(212, 175, 55, 0.4);
}

.product-card .add_to_cart_button.added,
.woocommerce .products li.product .button.added {
    background: linear-gradient(135deg, var(--classic-gold), var(--antique-gold));
    color: var(--rich-black, #1E1E1E);
}

.product-card .added_to_cart,
.woocommerce .products li.product .added_to_cart {
    display: block;
    text-align: center;
    margin: 10px auto 5px auto;
    color: var(--classic-gold, #D4AF37);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    transition: color 0.3s ease;
    width: calc(100% - 20px);
}

.product-card .added_to_cart:hover,
.woocommerce .products li.product .added_to_cart:hover {
    color: var(--bright-gold, #FFD700);
    text-decoration: underline;
}

.product-card .sale-badge,
.woocommerce .products li.product .onsale {
    position: absolute;
    top: 20px;
    right: 20px;
    background: linear-gradient(135deg, var(--classic-gold, #D4AF37), var(--bright-gold, #FFD700));
    color: var(--rich-black, #1E1E1E);
    padding: 8px 16px;
    border-radius: 30px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    z-index: 10;
    box-shadow: 0 4px 10px rgba(212, 175, 55, 0.3);
    border: 2px solid var(--pure-white, #FFFFFF);
    margin: 0;
    line-height: 1;
}

.product-card .out-of-stock-badge,
.woocommerce .products li.product .outofstock .badge {
    position: absolute;
    top: 20px;
    left: 20px;
    background: var(--rich-black, #1E1E1E);
    color: var(--pure-white, #FFFFFF);
    padding: 8px 16px;
    border-radius: 30px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    z-index: 10;
    border: 2px solid var(--classic-gold, #D4AF37);
}

/* =============================================
   12. PAGE & POST HEADERS
   ============================================= */
.page-header {
    margin-bottom: 2rem;
    text-align: center;
}

.page-title {
    font-size: 2.5rem;
    color: var(--rich-black);
    margin-bottom: 1rem;
}

.post-header {
    margin-bottom: 2rem;
}

.post-title {
    font-size: 2.2rem;
    color: var(--rich-black);
    margin-bottom: 0.5rem;
}

.post-meta {
    color: var(--soft-black);
    font-size: 0.9rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--off-white);
    padding-bottom: 1rem;
}

.post-meta span {
    margin-right: 15px;
}

.post-meta span::before {
    margin-right: 5px;
}

.posted-by::before {
    content: "👤";
}

.posted-on::before {
    content: "📅";
}

.post-categories::before {
    content: "📂";
}

.entry-content {
    line-height: 1.8;
    margin: 2rem 0;
}

.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
    margin: 1.5rem 0 1rem;
}

.entry-content p {
    margin-bottom: 1.5rem;
}

.entry-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

.comments-section {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 2px solid var(--off-white);
}

.comment-reply-title {
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.no-results {
    text-align: center;
    padding: 3rem;
    background: var(--pure-white);
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.no-results h2 {
    margin-bottom: 1rem;
}

.no-results p {
    margin-bottom: 2rem;
    color: var(--soft-black);
}

.featured-products-section {
    margin: 3rem 0;
    text-align: center;
}

.section-title {
    font-size: 2rem;
    text-align: center;
    margin-bottom: 0.5rem;
    color: var(--rich-black);
}

.section-subtitle {
    text-align: center;
    color: var(--soft-black);
    margin-bottom: 2rem;
}

/* =============================================
   13. BLOG CARDS
   ============================================= */
.blog-card {
    background: var(--pure-white);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.blog-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 20px rgba(212, 175, 55, 0.15);
}

.blog-card .post-thumbnail img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.blog-card .post-content {
    padding: 1.5rem;
}

.blog-card .post-title {
    font-size: 1.3rem;
    margin-bottom: 0.5rem;
}

.blog-card .post-title a {
    color: var(--rich-black);
    text-decoration: none;
}

.blog-card .post-title a:hover {
    color: var(--classic-gold);
}

.blog-card .post-meta {
    color: var(--soft-black);
    font-size: 0.85rem;
    margin-bottom: 0.8rem;
    border-bottom: none;
    padding-bottom: 0;
}

.blog-card .post-excerpt {
    color: var(--soft-black);
    margin-bottom: 1rem;
    line-height: 1.6;
}

/* =============================================
   14. RESPONSIVE STYLES
   ============================================= */
@media screen and (min-width: 1200px) {
    .product-card,
    .woocommerce .products li.product {
        flex: 0 0 calc(25% - 20px) !important;
        max-width: 280px !important;
    }
    
    .custom-logo.logo-small {
        max-height: 40px;
    }
    
    .custom-logo.logo-medium {
        max-height: 60px;
    }
    
    .custom-logo.logo-large {
        max-height: 80px;
    }
}

@media screen and (max-width: 1199px) and (min-width: 992px) {
    .product-card,
    .woocommerce .products li.product {
        flex: 0 0 calc(25% - 20px) !important;
        max-width: 260px !important;
    }
}

@media screen and (max-width: 991px) and (min-width: 768px) {
    .product-card,
    .woocommerce .products li.product {
        flex: 0 0 calc(33.333% - 20px) !important;
        max-width: 280px !important;
    }
}

@media screen and (max-width: 767px) {
    .container {
        padding: 0 10px;
    }
    
    .site-header {
        padding: 0.5rem 1rem;
    }
    
    .header-container {
        flex-wrap: wrap;
        position: relative;
        min-height: 60px;
    }
    
    .menu-toggle {
        display: block !important;
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
    }
    
    .menu-toggle span {
        display: block;
        width: 25px;
        height: 3px;
        background-color: var(--classic-gold, #D4AF37);
        margin: 5px 0;
        transition: all 0.3s ease;
        border-radius: 3px;
    }
    
    .menu-toggle.active span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }
    
    .menu-toggle.active span:nth-child(2) {
        opacity: 0;
    }
    
    .menu-toggle.active span:nth-child(3) {
        transform: rotate(-45deg) translate(7px, -6px);
    }
    
    .main-navigation {
        width: 100%;
        display: none;
        margin-top: 15px;
        background: var(--pure-white);
        border-radius: 8px;
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    }
    
    .main-navigation.show {
        display: block !important;
    }
    
    .primary-menu {
        flex-direction: column;
        gap: 0;
        padding: 1rem;
    }
    
    .primary-menu li {
        width: 100%;
        margin: 0;
        border-bottom: 1px solid var(--off-white);
    }
    
    .primary-menu li:last-child {
        border-bottom: none;
    }
    
    .primary-menu a {
        display: block;
        padding: 1rem;
    }
    
    .primary-menu a::after {
        display: none;
    }
    
    .hero-banner {
        padding: 2rem 1rem;
    }
    
    .hero-title {
        font-size: 2rem;
    }
    
    .hero-subtitle {
        font-size: 1rem;
    }
    
    .product-card,
    .woocommerce .products li.product {
        flex: 0 0 calc(50% - 15px) !important;
        max-width: none !important;
        min-width: 140px !important;
    }
    
    .product-card .product-thumbnail,
    .woocommerce .products li.product a img {
        height: 180px;
    }
    
    .product-card .product-content {
        padding: 15px 12px 20px 12px;
    }
    
    .product-card .product-title,
    .woocommerce .products li.product h2 {
        font-size: 0.95rem;
        margin-bottom: 5px;
    }
    
    .product-card .product-price,
    .woocommerce .products li.product .price {
        font-size: 1rem;
        margin: 3px 0 10px 0;
    }
    
    .product-card .add_to_cart_button,
    .woocommerce .products li.product .button {
        padding: 10px 12px;
        font-size: 0.8rem;
        width: calc(100% - 16px);
    }
    
    .sale-badge, .onsale {
        top: 10px;
        right: 10px;
        padding: 4px 10px;
        font-size: 0.7rem;
    }
    
    .menu-item-cart {
        margin-left: 0 !important;
        margin-top: 10px;
        text-align: center;
    }
    
    .menu-item-cart a {
        justify-content: center;
    }
    
    .custom-logo {
        max-height: 50px;
    }
    
    .single-product .container,
    .woocommerce div.product {
        padding: 20px 15px !important;
    }
    
    .woocommerce div.product .product_title {
        font-size: 1.8rem;
    }
    
    .woocommerce div.product .price {
        font-size: 1.6rem !important;
    }
    
    .woocommerce div.product form.cart .variations select,
    .woocommerce div.product form.cart input[type="text"] {
        max-width: 100%;
    }
    
    .woocommerce div.product .woocommerce-tabs ul.tabs {
        flex-direction: column;
        gap: 3px;
    }
    
    .woocommerce div.product .woocommerce-tabs ul.tabs li {
        width: 100%;
        margin: 0;
    }
    
    .woocommerce div.product .woocommerce-tabs ul.tabs li a {
        width: 100%;
        text-align: center;
        border-radius: 8px;
    }
    
    .woocommerce div.product .woocommerce-tabs .panel {
        padding: 20px 15px;
    }
    
    .woocommerce span.onsale {
        top: 10px;
        left: 10px;
        padding: 5px 12px !important;
        font-size: 0.7rem !important;
    }
    
    .woocommerce div.product form.cart .single_add_to_cart_button {
        width: 100%;
        text-align: center;
    }
}

@media screen and (max-width: 480px) {
    .product-card,
    .woocommerce .products li.product {
        flex: 0 0 100% !important;
        max-width: 300px !important;
        margin: 0 auto !important;
    }
    
    .product-card .product-thumbnail,
    .woocommerce .products li.product a img {
        height: 220px;
    }
    
    .site-title {
        font-size: 1.5rem;
    }
    
    .hero-title {
        font-size: 1.5rem;
    }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
    .single-product .container,
    .woocommerce div.product {
        padding: 25px 20px !important;
    }
    
    .woocommerce div.product .woocommerce-tabs ul.tabs li a {
        padding: 10px 20px;
    }
}

.admin-bar .site-header.sticky-header {
    top: 32px;
}

@media screen and (max-width: 782px) {
    .admin-bar .site-header.sticky-header {
        top: 46px;
    }
}

@media print {
    .site-header,
    .site-footer,
    .btn,
    .social-icons-wrapper {
        display: none;
    }
}

/* =============================================
   15. VARIABLE PRODUCT PAGE
   ============================================= */
.single-product .main-content,
.single-product .container,
.woocommerce div.product {
    padding: 30px 20px !important;
    max-width: 1300px;
    margin: 0 auto !important;
    width: 100%;
}

.woocommerce div.product .product_title {
    font-size: 2.2rem;
    color: var(--rich-black, #1E1E1E);
    margin-bottom: 20px;
    font-weight: 600;
    line-height: 1.3;
}

.woocommerce div.product .price {
    font-size: 2rem !important;
    color: var(--classic-gold, #D4AF37) !important;
    font-weight: 700;
    margin-bottom: 25px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(212, 175, 55, 0.2);
}

.woocommerce div.product .price del {
    color: var(--soft-black, #2B2B2B);
    font-size: 1.3rem;
    opacity: 0.6;
    margin-right: 10px;
}

.woocommerce div.product .price ins {
    text-decoration: none;
    color: var(--classic-gold, #D4AF37);
    font-weight: 700;
}

/* =============================================
   16. VARIATION STYLING
   ============================================= */
.woocommerce div.product form.cart .variations {
    margin-bottom: 25px;
    width: 100%;
    border: none;
}

.woocommerce div.product form.cart .variations tr {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
    border: none;
}

.woocommerce div.product form.cart .variations td {
    display: block;
    padding: 0;
    border: none;
    text-align: left;
}

.woocommerce div.product form.cart .variations td.label {
    padding: 0 0 8px 0;
    background: transparent;
    font-size: 1rem;
}

.woocommerce div.product form.cart .variations label {
    color: var(--rich-black, #1E1E1E);
    font-weight: 600;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.woocommerce div.product form.cart .variations select {
    width: 100%;
    max-width: 400px;
    padding: 12px 15px;
    border: 2px solid var(--off-white, #FCFBF9);
    border-radius: 8px;
    background: var(--pure-white, #FFFFFF);
    color: var(--rich-black, #1E1E1E);
    font-size: 1rem;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23D4AF37' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 16px;
    transition: all 0.3s ease;
}

.woocommerce div.product form.cart .variations select:hover {
    border-color: var(--classic-gold, #D4AF37);
}

.woocommerce div.product form.cart .variations select:focus {
    outline: none;
    border-color: var(--classic-gold, #D4AF37);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
}

.woocommerce div.product form.cart .reset_variations {
    display: inline-block !important;
    margin: 10px 0;
    padding: 5px 15px;
    background: var(--off-white, #FCFBF9);
    color: var(--rich-black, #1E1E1E);
    border-radius: 20px;
    font-size: 0.85rem;
    text-decoration: none;
    transition: all 0.3s ease;
}

.woocommerce div.product form.cart .reset_variations:hover {
    background: var(--classic-gold, #D4AF37);
    color: var(--rich-black, #1E1E1E);
}

.woocommerce div.product form.cart input[type="text"],
.woocommerce div.product form.cart input[type="number"],
.woocommerce div.product form.cart input[type="email"],
.woocommerce div.product form.cart input[type="tel"] {
    width: 100%;
    max-width: 400px;
    padding: 12px 15px;
    border: 2px solid var(--off-white, #FCFBF9);
    border-radius: 8px;
    background: var(--pure-white, #FFFFFF);
    color: var(--rich-black, #1E1E1E);
    font-size: 1rem;
    transition: all 0.3s ease;
}

.woocommerce div.product form.cart input:focus {
    outline: none;
    border-color: var(--classic-gold, #D4AF37);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
}

.woocommerce div.product form.cart div.quantity {
    margin: 20px 0;
    display: inline-block;
}

.woocommerce div.product form.cart .quantity input[type="number"] {
    width: 100px;
    padding: 12px;
    border: 2px solid var(--off-white, #FCFBF9);
    border-radius: 8px;
    text-align: center;
    font-size: 1rem;
}

.woocommerce div.product form.cart .quantity input::-webkit-outer-spin-button,
.woocommerce div.product form.cart .quantity input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.woocommerce div.product form.cart .quantity input[type=number] {
    -moz-appearance: textfield;
}

.woocommerce div.product form.cart .single_add_to_cart_button {
    background: linear-gradient(135deg, var(--classic-gold, #D4AF37), var(--bright-gold, #FFD700)) !important;
    color: var(--rich-black, #1E1E1E) !important;
    font-weight: 700 !important;
    padding: 16px 40px !important;
    border-radius: 50px !important;
    font-size: 1.1rem !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: none;
    box-shadow: 0 8px 20px rgba(212, 175, 55, 0.3);
    transition: all 0.3s ease !important;
    margin: 20px 0;
    cursor: pointer;
    line-height: 1;
}

.woocommerce div.product form.cart .single_add_to_cart_button:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(212, 175, 55, 0.5);
    background: linear-gradient(135deg, var(--bright-gold, #FFD700), var(--classic-gold, #D4AF37)) !important;
}

/* =============================================
   17. TABS & PANELS
   ============================================= */
.woocommerce div.product .woocommerce-tabs {
    margin-top: 50px;
    padding-top: 30px;
    border-top: 2px solid var(--off-white, #FCFBF9);
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
    padding: 0;
    margin: 0 0 30px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    border-bottom: 2px solid var(--off-white, #FCFBF9);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
    border: none;
    background: transparent;
    border-radius: 8px 8px 0 0;
    margin: 0 5px 0 0;
    padding: 0;
    position: relative;
    z-index: 1;
}

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

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    padding: 12px 25px;
    color: var(--soft-black, #2B2B2B);
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-block;
    background: var(--off-white, #FCFBF9);
    border-radius: 8px 8px 0 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
    background: var(--classic-gold, #D4AF37);
    color: var(--rich-black, #1E1E1E);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
    background: var(--classic-gold, #D4AF37);
    color: var(--rich-black, #1E1E1E);
    opacity: 0.9;
}

.woocommerce div.product .woocommerce-tabs .panel {
    background: var(--pure-white, #FFFFFF);
    padding: 30px;
    border-radius: 0 0 12px 12px;
    border: 1px solid var(--off-white, #FCFBF9);
    border-top: 3px solid var(--classic-gold, #D4AF37);
    margin-bottom: 30px;
}

.woocommerce div.product .woocommerce-tabs .panel h2 {
    font-size: 1.5rem;
    color: var(--rich-black, #1E1E1E);
    margin-bottom: 20px;
    font-weight: 600;
}

.woocommerce #reviews {
    padding: 20px 0;
}

.woocommerce #reviews h3 {
    font-size: 1.2rem;
    margin-bottom: 20px;
    color: var(--rich-black, #1E1E1E);
}

.woocommerce #reviews .comment-reply-title {
    font-size: 1.1rem;
    color: var(--classic-gold, #D4AF37);
}

.woocommerce #reviews .comment-form input,
.woocommerce #reviews .comment-form textarea {
    width: 100%;
    padding: 12px;
    border: 2px solid var(--off-white, #FCFBF9);
    border-radius: 8px;
    margin-bottom: 15px;
}

.woocommerce #reviews .comment-form input:focus,
.woocommerce #reviews .comment-form textarea:focus {
    outline: none;
    border-color: var(--classic-gold, #D4AF37);
}

.woocommerce #reviews .comment-form .submit {
    background: var(--classic-gold, #D4AF37) !important;
    color: var(--rich-black, #1E1E1E) !important;
    padding: 12px 30px !important;
    border-radius: 50px !important;
    font-weight: 600;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

.woocommerce #reviews .comment-form .submit:hover {
    background: var(--antique-gold, #B4943C) !important;
    color: var(--pure-white, #FFFFFF) !important;
    transform: translateY(-2px);
}

/* =============================================
   18. SALE BADGE
   ============================================= */
.woocommerce span.onsale {
    position: absolute;
    top: 15px;
    left: 15px;
    background: linear-gradient(135deg, var(--classic-gold, #D4AF37), var(--bright-gold, #FFD700));
    color: var(--rich-black, #1E1E1E);
    padding: 8px 15px !important;
    border-radius: 30px !important;
    font-size: 0.8rem !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 10;
    box-shadow: 0 4px 10px rgba(212, 175, 55, 0.3);
    border: 2px solid var(--pure-white, #FFFFFF);
    min-height: auto !important;
    min-width: auto !important;
    line-height: 1.2;
    margin: 0 !important;
    display: inline-block;
    width: auto !important;
    transform: none !important;
}

/* =============================================
   19. DROPDOWN MENUS
   ============================================= */
select,
.dropdown,
.woocommerce-ordering select,
.woocommerce .woocommerce-ordering select,
.woocommerce .variations select,
.woocommerce select,
.woocommerce-page select {
    width: 100%;
    max-width: 400px;
    padding: 12px 15px;
    border: 2px solid var(--off-white, #FCFBF9);
    border-radius: 8px;
    background: var(--pure-white, #FFFFFF);
    color: var(--rich-black, #1E1E1E);
    font-size: 1rem;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23D4AF37' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 16px;
    transition: all 0.3s ease;
}

select:hover,
.woocommerce-ordering select:hover,
.woocommerce .variations select:hover,
.woocommerce select:hover {
    border-color: var(--classic-gold, #D4AF37);
}

select:focus,
.woocommerce-ordering select:focus,
.woocommerce .variations select:focus,
.woocommerce select:focus {
    outline: none;
    border-color: var(--classic-gold, #D4AF37);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
}

/* =============================================
   20. MY ACCOUNT PAGE
   ============================================= */
.woocommerce-account .woocommerce {
    max-width: 1200px;
    margin: 0 auto;
    padding: 30px 20px;
}

.woocommerce-MyAccount-navigation {
    background: var(--pure-white, #FFFFFF);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 30px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(212, 175, 55, 0.1);
}

.woocommerce-MyAccount-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.woocommerce-MyAccount-navigation ul li {
    margin: 0;
    padding: 0;
    flex: 1 1 auto;
}

.woocommerce-MyAccount-navigation ul li a {
    display: block;
    padding: 12px 20px;
    background: var(--off-white, #FCFBF9);
    color: var(--rich-black, #1E1E1E);
    text-decoration: none;
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.3s ease;
    text-align: center;
}

.woocommerce-MyAccount-navigation ul li.is-active a {
    background: var(--classic-gold, #D4AF37);
    color: var(--rich-black, #1E1E1E);
}

.woocommerce-MyAccount-navigation ul li a:hover {
    background: var(--classic-gold, #D4AF37);
    color: var(--rich-black, #1E1E1E);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(212, 175, 55, 0.2);
}

.woocommerce-MyAccount-content {
    background: var(--pure-white, #FFFFFF);
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(212, 175, 55, 0.1);
}

.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3 {
    color: var(--rich-black, #1E1E1E);
    margin-bottom: 20px;
    font-size: 1.5rem;
}

.woocommerce-MyAccount-content form {
    max-width: 600px;
}

.woocommerce-MyAccount-content form p {
    margin-bottom: 20px;
}

.woocommerce-MyAccount-content form label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--rich-black, #1E1E1E);
}

.woocommerce-MyAccount-content form input[type="text"],
.woocommerce-MyAccount-content form input[type="email"],
.woocommerce-MyAccount-content form input[type="password"] {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid var(--off-white, #FCFBF9);
    border-radius: 8px;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.woocommerce-MyAccount-content form input:focus {
    outline: none;
    border-color: var(--classic-gold, #D4AF37);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
}

.woocommerce-MyAccount-content form button,
.woocommerce-MyAccount-content .button {
    background: linear-gradient(135deg, var(--classic-gold, #D4AF37), var(--bright-gold, #FFD700)) !important;
    color: var(--rich-black, #1E1E1E) !important;
    font-weight: 600 !important;
    padding: 12px 30px !important;
    border-radius: 50px !important;
    border: none !important;
    cursor: pointer;
    transition: all 0.3s ease !important;
}

.woocommerce-MyAccount-content form button:hover,
.woocommerce-MyAccount-content .button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(212, 175, 55, 0.3);
}

.woocommerce-orders-table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
}

.woocommerce-orders-table thead {
    background: var(--off-white, #FCFBF9);
}

.woocommerce-orders-table th {
    padding: 15px;
    font-weight: 600;
    color: var(--rich-black, #1E1E1E);
    border-bottom: 2px solid var(--classic-gold, #D4AF37);
}

.woocommerce-orders-table td {
    padding: 15px;
    border-bottom: 1px solid var(--off-white, #FCFBF9);
}

.woocommerce-orders-table td a {
    color: var(--classic-gold, #D4AF37);
    text-decoration: none;
    font-weight: 500;
}

.woocommerce-orders-table td a:hover {
    color: var(--bright-gold, #FFD700);
    text-decoration: underline;
}

.woocommerce-table--order-downloads {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
}

.woocommerce-table--order-downloads th {
    background: var(--off-white, #FCFBF9);
    padding: 15px;
    font-weight: 600;
    color: var(--rich-black, #1E1E1E);
    border-bottom: 2px solid var(--classic-gold, #D4AF37);
}

.woocommerce-table--order-downloads td {
    padding: 15px;
    border-bottom: 1px solid var(--off-white, #FCFBF9);
}

.woocommerce-table--order-downloads .download-file a {
    background: var(--classic-gold, #D4AF37);
    color: var(--rich-black, #1E1E1E);
    padding: 8px 20px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 500;
    display: inline-block;
    transition: all 0.3s ease;
}

.woocommerce-table--order-downloads .download-file a:hover {
    background: var(--antique-gold, #B4943C);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(212, 175, 55, 0.3);
}

/* =============================================
   21. LOGIN PAGE
   ============================================= */
.woocommerce form.login,
.woocommerce form.register {
    max-width: 500px;
    margin: 30px auto !important;
    padding: 40px !important;
    background: var(--pure-white, #FFFFFF);
    border-radius: 20px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(212, 175, 55, 0.1);
}

.woocommerce form.login h2,
.woocommerce form.register h2 {
    font-size: 2rem;
    color: var(--rich-black, #1E1E1E);
    margin-bottom: 30px;
    text-align: center;
}

.woocommerce form.login p,
.woocommerce form.register p {
    margin-bottom: 20px;
}

.woocommerce form.login label,
.woocommerce form.register label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--rich-black, #1E1E1E);
}

.woocommerce form.login input[type="text"],
.woocommerce form.login input[type="email"],
.woocommerce form.login input[type="password"],
.woocommerce form.register input[type="text"],
.woocommerce form.register input[type="email"],
.woocommerce form.register input[type="password"] {
    width: 100%;
    padding: 14px 15px;
    border: 2px solid var(--off-white, #FCFBF9);
    border-radius: 8px;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.woocommerce form.login input:focus,
.woocommerce form.register input:focus {
    outline: none;
    border-color: var(--classic-gold, #D4AF37);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
}

.woocommerce form.login .button,
.woocommerce form.register .button {
    width: 100%;
    background: linear-gradient(135deg, var(--classic-gold, #D4AF37), var(--bright-gold, #FFD700)) !important;
    color: var(--rich-black, #1E1E1E) !important;
    font-weight: 700 !important;
    padding: 16px !important;
    border-radius: 50px !important;
    font-size: 1.1rem !important;
    border: none !important;
    cursor: pointer;
    transition: all 0.3s ease !important;
    margin: 10px 0;
}

.woocommerce form.login .button:hover,
.woocommerce form.register .button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(212, 175, 55, 0.3);
}

.woocommerce form.login .woocommerce-form__label-for-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
}

.woocommerce form.login input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--classic-gold, #D4AF37);
}

.woocommerce-LostPassword a {
    color: var(--classic-gold, #D4AF37);
    text-decoration: none;
}

.woocommerce-LostPassword a:hover {
    color: var(--bright-gold, #FFD700);
    text-decoration: underline;
}

/* =============================================
   22. SEARCH FORMS
   ============================================= */
.search-form {
    display: flex;
    max-width: 400px;
    margin: 0;
}

.search-form input[type="search"] {
    flex: 1;
    padding: 12px 15px;
    border: 2px solid var(--off-white, #FCFBF9);
    border-radius: 50px 0 0 50px;
    font-size: 1rem;
    background: var(--pure-white, #FFFFFF);
    transition: all 0.3s ease;
}

.search-form input[type="search"]:focus {
    outline: none;
    border-color: var(--classic-gold, #D4AF37);
    box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.1);
}

.search-form button,
.search-form input[type="submit"] {
    padding: 12px 25px;
    background: var(--classic-gold, #D4AF37);
    color: var(--rich-black, #1E1E1E);
    border: 2px solid var(--classic-gold, #D4AF37);
    border-radius: 0 50px 50px 0;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.search-form button:hover,
.search-form input[type="submit"]:hover {
    background: var(--antique-gold, #B4943C);
    border-color: var(--antique-gold, #B4943C);
    color: var(--pure-white, #FFFFFF);
}

.woocommerce-product-search {
    display: flex;
    max-width: 400px;
}

.woocommerce-product-search input[type="search"] {
    flex: 1;
    padding: 12px 15px;
    border: 2px solid var(--off-white, #FCFBF9);
    border-radius: 50px 0 0 50px;
    font-size: 1rem;
    background: var(--pure-white, #FFFFFF);
}

.woocommerce-product-search input[type="search"]:focus {
    outline: none;
    border-color: var(--classic-gold, #D4AF37);
}

.woocommerce-product-search button {
    padding: 12px 25px;
    background: var(--classic-gold, #D4AF37);
    color: var(--rich-black, #1E1E1E);
    border: 2px solid var(--classic-gold, #D4AF37);
    border-radius: 0 50px 50px 0;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.woocommerce-product-search button:hover {
    background: var(--antique-gold, #B4943C);
    border-color: var(--antique-gold, #B4943C);
    color: var(--pure-white, #FFFFFF);
}

/* =============================================
   23. LINK STYLING
   ============================================= */
a {
    color: var(--classic-gold, #D4AF37);
    text-decoration: none;
    transition: all 0.3s ease;
}

a:hover {
    color: var(--bright-gold, #FFD700);
    text-decoration: underline;
}

.primary-menu a {
    color: var(--rich-black, #1E1E1E);
    text-decoration: none;
}

.primary-menu a:hover {
    color: var(--classic-gold, #D4AF37);
    text-decoration: none;
}

.site-footer a {
    color: var(--classic-gold, #D4AF37);
}

.site-footer a:hover {
    color: var(--bright-gold, #FFD700);
}

.woocommerce-loop-product__link {
    text-decoration: none;
}

.woocommerce-loop-product__link:hover .product-title {
    color: var(--classic-gold, #D4AF37);
}

.pagination a {
    color: var(--rich-black, #1E1E1E);
    text-decoration: none;
}

.pagination a:hover {
    color: var(--classic-gold, #D4AF37);
}

.product-category a {
    text-decoration: none;
}

.btn-link {
    color: var(--classic-gold, #D4AF37);
    text-decoration: none;
}

.btn-link:hover {
    color: var(--bright-gold, #FFD700);
    text-decoration: underline;
}

/* =============================================
   ACCOUNT PAGE RESPONSIVE
   ============================================= */
@media screen and (max-width: 767px) {
    .woocommerce-MyAccount-navigation ul {
        flex-direction: column;
    }
    
    .woocommerce-MyAccount-navigation ul li a {
        text-align: left;
    }
    
    .woocommerce-MyAccount-content {
        padding: 20px;
    }
    
    .woocommerce-orders-table,
    .woocommerce-table--order-downloads {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .woocommerce form.login,
    .woocommerce form.register {
        padding: 25px !important;
        margin: 20px 15px !important;
    }
    
    .woocommerce form.login h2,
    .woocommerce form.register h2 {
        font-size: 1.6rem;
    }
    
    .search-form,
    .woocommerce-product-search {
        max-width: 100%;
    }
    
    .search-form input[type="search"],
    .woocommerce-product-search input[type="search"] {
        min-width: 150px;
    }
}

/* =============================================
   24. SIDEBAR WIDGETS
   ============================================= */
#sidebar {
    background: var(--pure-white, #FFFFFF);
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(212, 175, 55, 0.1);
    margin-bottom: 30px;
}

#sidebar h2 {
    font-size: 1.3rem;
    color: var(--rich-black, #1E1E1E);
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--classic-gold, #D4AF37);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

#sidebar ul {
    list-style: none;
    margin: 0 0 30px 0;
    padding: 0;
}

#sidebar ul ul {
    margin: 10px 0 10px 15px;
}

#sidebar ul li {
    margin-bottom: 10px;
    padding: 0;
}

#sidebar ul li a {
    color: var(--rich-black, #1E1E1E);
    text-decoration: none;
    padding: 8px 0;
    display: inline-block;
    transition: all 0.3s ease;
    position: relative;
}

#sidebar ul li a:hover {
    color: var(--classic-gold, #D4AF37);
    transform: translateX(5px);
}

#sidebar ul li.current_page_item a {
    color: var(--classic-gold, #D4AF37);
    font-weight: 600;
    position: relative;
}

#sidebar ul li.current_page_item a::before {
    content: '•';
    color: var(--classic-gold, #D4AF37);
    font-size: 1.2rem;
    position: absolute;
    left: -15px;
    top: 50%;
    transform: translateY(-50%);
}

#sidebar .search-form {
    display: flex;
    width: 100%;
    margin: 10px 0 20px;
    background: var(--pure-white, #FFFFFF);
    border: 2px solid var(--off-white, #FCFBF9);
    border-radius: 50px;
    overflow: hidden;
    transition: all 0.3s ease;
}

#sidebar .search-form:hover,
#sidebar .search-form:focus-within {
    border-color: var(--classic-gold, #D4AF37);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
}

#sidebar .search-form .search-field {
    flex: 1;
    padding: 12px 15px;
    border: none;
    background: transparent;
    font-size: 0.95rem;
    color: var(--rich-black, #1E1E1E);
}

#sidebar .search-form .search-field:focus {
    outline: none;
}

#sidebar .search-form .search-field::placeholder {
    color: var(--soft-black, #2B2B2B);
    opacity: 0.6;
}

#sidebar .search-form .search-submit {
    padding: 12px 25px;
    background: var(--classic-gold, #D4AF37);
    color: var(--rich-black, #1E1E1E);
    border: none;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

#sidebar .search-form .search-submit:hover {
    background: var(--antique-gold, #B4943C);
    color: var(--pure-white, #FFFFFF);
}

.cat-item {
    position: relative;
}

.cat-item a {
    display: inline-block;
    padding-right: 15px;
}

.cat-item .count {
    color: var(--soft-black, #2B2B2B);
    font-size: 0.9rem;
    background: var(--off-white, #FCFBF9);
    padding: 2px 8px;
    border-radius: 20px;
    margin-left: 8px;
    transition: all 0.3s ease;
}

.cat-item a:hover + .count,
.cat-item a:hover .count {
    background: var(--classic-gold, #D4AF37);
    color: var(--rich-black, #1E1E1E);
}

#sidebar .archives li a {
    display: inline-block;
}

.page_item {
    position: relative;
}

.widget_price_filter .price_slider {
    margin: 20px 0;
}

.widget_price_filter .price_slider_amount {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.widget_price_filter .price_label {
    color: var(--rich-black, #1E1E1E);
    font-weight: 600;
}

.widget_product_categories .cat-item a {
    display: inline-block;
}

.widget_layered_nav_filters ul li a {
    background: var(--off-white, #FCFBF9);
    padding: 5px 12px !important;
    border-radius: 20px;
    font-size: 0.9rem;
}

.widget_layered_nav_filters ul li a:hover {
    background: var(--classic-gold, #D4AF37);
    color: var(--rich-black, #1E1E1E) !important;
}

@media screen and (max-width: 991px) {
    #sidebar {
        margin-top: 40px;
    }
}

@media screen and (max-width: 767px) {
    #sidebar {
        padding: 20px;
    }
    
    #sidebar .search-form {
        flex-direction: column;
        border-radius: 12px;
    }
    
    #sidebar .search-form .search-field {
        width: 100%;
        border-bottom: 1px solid var(--off-white, #FCFBF9);
    }
    
    #sidebar .search-form .search-submit {
        width: 100%;
        border-radius: 0;
    }
    
    #sidebar ul li a:hover {
        transform: none;
    }
}

/* =============================================
   25. FOOTER WIDGETS
   ============================================= */
.footer-widget-area {
    background: #f5f5f5;
    padding: 40px 20px;
    margin-top: 40px;
}

.footer-widgets-container {
    display: flex;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: 0 auto;
    gap: 30px;
}

.footer-column {
    flex: 1;
    min-width: 250px;
}

.footer-layout-equal .footer-column {
    flex: 1;
}

.footer-layout-wide-left .footer-column-1 {
    flex: 2;
}

.footer-layout-wide-left .footer-column:not(.footer-column-1) {
    flex: 1;
}

.footer-layout-center {
    text-align: center;
}

.footer-layout-center .footer-column {
    flex: 1;
}

@media (max-width: 768px) {
    .footer-widgets-container {
        flex-direction: column;
    }
    
    .footer-column {
        width: 100%;
        margin-bottom: 20px;
    }
}

.footer-widget {
    margin-bottom: 30px;
}

.footer-widget .widget-title {
    font-size: 18px;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid #ddd;
}

.footer-widget ul {
    list-style: none;
    padding: 0;
}

.footer-widget ul li {
    margin-bottom: 8px;
}

.footer-widget ul li a {
    text-decoration: none;
    color: #333;
    transition: color 0.3s;
}

.footer-widget ul li a:hover {
    color: #007cba;
}
/* =============================================
   HERO SLIDER STYLES
   ============================================= */
.hero-slider {
    position: relative;
    width: 100%;
    height: 500px; /* Your original desktop height */
    overflow: hidden;
    margin-bottom: 0;
    border-radius: 6px; /* Added border radius to the slider container */
}

.slider-container {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 6px; /* Match the border radius */
    overflow: hidden; /* Keep this to maintain rounded corners */
}

.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.8s ease, visibility 0.8s ease;
    border-radius: 6px; /* Added border radius to slides */
    overflow: hidden; /* Ensures content respects the border radius */
}

.slide.active {
    opacity: 1;
    visibility: visible;
}

.slide-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 6px; /* Added border radius to background */
}

.slide-background::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(30,30,30,0.7) 0%, rgba(30,30,30,0.4) 100%);
    z-index: 1;
    border-radius: 6px; /* Match border radius */
}

.slide-content {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: var(--pure-white, #FFFFFF);
    border-radius: 6px; /* Match border radius */
}

/* Animated Title Styles - Maintaining your original animation */
.animated-title {
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    position: relative;
    z-index: 1;
    animation: fadeInUp 1s ease-out;
}

.animated-title span {
    color: var(--classic-gold, #D4AF37);
    display: inline-block;
    animation: goldGlow 2s infinite;
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.3);
}

.slide-subtitle {
    font-size: 1.3rem;
    margin-bottom: 2rem;
    opacity: 0.9;
    animation: fadeInUp 1s ease-out 0.3s both;
}

/* Button Styles */
.btn-slide {
    display: inline-block;
    padding: 16px 40px;
    background: linear-gradient(135deg, var(--classic-gold, #D4AF37), var(--bright-gold, #FFD700));
    color: var(--rich-black, #1E1E1E);
    font-weight: 700;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
    border-radius: 50px; /* Keep this as is for rounded button */
    border: 2px solid transparent;
    box-shadow: 0 8px 20px rgba(212, 175, 55, 0.3);
    transition: all 0.3s ease;
    animation: fadeInUp 1s ease-out 0.6s both;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.btn-slide::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--bright-gold, #FFD700), var(--classic-gold, #D4AF37));
    transition: left 0.4s ease;
    z-index: -1;
}

.btn-slide:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(212, 175, 55, 0.5);
    color: var(--rich-black, #1E1E1E);
    border-color: var(--pure-white);
}

.btn-slide:hover::before {
    left: 0;
}

/* Slider Navigation Dots */
.slider-dots {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 15px;
    z-index: 20; /* Increased z-index to ensure dots are above slides */
}

.dot {
    width: 12px;
    height: 12px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.dot.active {
    background: var(--classic-gold, #D4AF37);
    transform: scale(1.2);
    border-color: var(--pure-white);
}

.dot:hover {
    background: var(--classic-gold, #D4AF37);
}

/* Slider Arrows */
.slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.2);
    color: var(--pure-white);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%; /* Keep arrows circular */
    font-size: 24px;
    cursor: pointer;
    z-index: 20; /* Increased z-index to ensure arrows are above slides */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
}

.slider-arrow:hover {
    background: var(--classic-gold, #D4AF37);
    color: var(--rich-black, #1E1E1E);
    border-color: var(--classic-gold);
}

.slider-arrow.prev {
    left: 30px;
}

.slider-arrow.next {
    right: 30px;
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes goldGlow {
    0%, 100% {
        text-shadow: 0 0 10px rgba(212, 175, 55, 0.3);
    }
    50% {
        text-shadow: 0 0 20px rgba(212, 175, 55, 0.6);
    }
}

/* =============================================
   RESPONSIVE STYLES - INCREASED HEIGHT ONLY FOR MOBILE/TABLET
   ============================================= */

/* Tablet Landscape - Increase height */
@media screen and (max-width: 1024px) and (min-width: 769px) {
    .hero-slider {
        height: 550px; /* Taller for tablets */
        border-radius: 6px; /* Maintain border radius */
    }
    
    .animated-title {
        font-size: 3rem;
    }
}

/* Mobile Landscape - Increase height */
@media screen and (max-width: 768px) {
    .hero-slider {
        height: 500px; /* Taller for mobile landscape */
        border-radius: 6px; /* Maintain border radius */
    }
    
    .animated-title {
        font-size: 2.5rem;
    }
    
    .slide-subtitle {
        font-size: 1.1rem;
    }
    
    .slider-arrow {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }
    
    .slider-arrow.prev {
        left: 15px;
    }
    
    .slider-arrow.next {
        right: 15px;
    }
}

/* Small Mobile - Increase height even more */
@media screen and (max-width: 480px) {
    .hero-slider {
        height: 450px; /* Tallest for small mobile */
        border-radius: 6px; /* Maintain border radius */
    }
    
    .animated-title {
        font-size: 2rem;
    }
    
    .slide-subtitle {
        font-size: 1rem;
        padding: 0 15px;
    }
    
    .btn-slide {
        padding: 12px 30px;
        font-size: 1rem;
    }
    
    .slider-dots {
        bottom: 20px;
    }
}

/* Extra Small Mobile */
@media screen and (max-width: 360px) {
    .hero-slider {
        height: 420px;
        border-radius: 6px; /* Maintain border radius */
    }
    
    .animated-title {
        font-size: 1.8rem;
    }
}

/* =============================================
   SLIDER SEPARATOR LINE
   ============================================= */
.slider-separator {
    width: 100%;
    height: 3px; /* Same as header border-bottom weight */
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(192, 192, 192, 0.3) 20%,
        rgba(128, 128, 128, 0.6) 50%,
        rgba(192, 192, 192, 0.3) 80%,
        transparent 100%
    );
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), 0 2px 5px rgba(192, 192, 192, 0.2);
    margin: 70px auto 20px auto; /* Changed top margin to 50px */
    position: relative;
    border-radius: 2px;
}

/* Optional: Add a subtle gold accent to match your theme */
.slider-separator::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 3px;
    background: var(--classic-gold, #D4AF37);
    opacity: 0.3;
    filter: blur(2px);
    border-radius: 2px;
}

/* Alternative: Solid silver-black with stronger shadow */
.slider-separator-solid {
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, #2B2B2B, #808080, #2B2B2B);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5), 0 0 10px rgba(192, 192, 192, 0.3);
    margin: 50px auto 40px auto; /* Changed top margin to 50px */
    border-radius: 2px;
}

/* =============================================
   RESPONSIVE ADJUSTMENTS
   ============================================= */
@media screen and (max-width: 768px) {
    .slider-separator,
    .slider-separator-solid {
        margin: 40px auto 30px auto; /* Slightly smaller on mobile */
    }
}

@media screen and (max-width: 480px) {
    .slider-separator,
    .slider-separator-solid {
        margin: 30px auto 20px auto; /* Even smaller on small mobile */
    }
}