/* =========================================
   1. DESIGN TOKENS (Premium Shopify-Grade)
   ========================================= */
:root {
    /* ----------------------------------
       COLOR PALETTE
    ---------------------------------- */
    /* Brand Colors */
    --color-brand-primary: #14B8A6;
    /* Teal */
    --color-brand-hover: #0F766E;
    --color-brand-accent: #F97316;
    /* Vibrant Orange */
    --color-brand-accent-hover: #EA580C;

    /* Backgrounds */
    --color-bg-body: #FAFAFA;
    /* Softest Grey/White */
    --color-bg-card: #FFFFFF;
    /* Soft Pastel Yellow (Cream) -> Vibrant Mockup Yellow */
    --color-bg-hero: #FDE047;
    /* Vibrant Sunny Yellow */
    --color-bg-soft: #F1F5F9;
    /* Light Grey for section separation */
    --color-bg-highlight: #FDF4FF;
    /* Very Soft Pink/Purple */
    --color-bg-texture: radial-gradient(circle at 10% 20%, rgb(253, 224, 71) 0%, rgb(250, 204, 21) 90%);
    /* Yellow Gradient */

    /* Text */
    --color-text-main: #111827;
    /* Near Black */
    --color-text-secondary: #4B5563;
    /* Grey 600 */
    --color-text-light: #9CA3AF;
    /* Grey 400 */
    --color-text-inverse: #FFFFFF;

    /* Borders */
    --color-border: #E5E7EB;

    /* ----------------------------------
       TYPOGRAPHY
    ---------------------------------- */
    --font-heading: 'Poppins', sans-serif;
    --font-body: 'Inter', sans-serif;

    /* ----------------------------------
       SPACING & LAYOUT
    ---------------------------------- */
    --container-max: 1280px;
    /* Master Width */
    --container-padding: 32px;
    --section-spacing: 80px;
    /* Premium Rhythm */

    --header-height: 80px;

    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 20px;
    /* Standardize on 20px */
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
    --shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.02), 0 10px 15px -3px rgba(0, 0, 0, 0.04);
    --shadow-hover: 0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 10px 10px -5px rgba(0, 0, 0, 0.02);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);

    /* Legacy Backwards Compatibility */
    --color-hero-teal: var(--color-brand-primary);
    --color-btn-pop: var(--color-brand-accent);
    --color-hero-yellow: var(--color-bg-hero);
}

/* Header Layout Fix */
.site-header .wd-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
}

.main-navigation {
    flex: 1;
    display: flex;
    justify-content: center;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: flex-end;
}

/* Logo Fix */
.site-branding {
    flex: 0 0 auto;
    margin-right: 40px;
}

/* =========================================
   2. RESET & BASE
   ========================================= */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    color: var(--color-text-main);
    background-color: #FFFFFF !important;
    /* Force White (Aggressive override) */
    background-image: none !important;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    /* Prevent horizontal scroll */
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    color: var(--color-text-main);
    line-height: 1.2;
    margin-top: 0;
    margin-bottom: var(--space-md);
}

h1 {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: var(--weight-black);
    letter-spacing: -0.02em;
}

h2 {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: var(--weight-bold);
    letter-spacing: -0.01em;
}

h3 {
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
}

p {
    margin-bottom: var(--space-md);
    max-width: 65ch;
    /* Optimal readability width */
}

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

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

/* =========================================
   3. LAYOUT UTILITIES
   ========================================= */
/* =========================================
   3. LAYOUT UTILITIES & SECTION SPACERS
   ========================================= */
.wd-container {
    width: 100%;
    max-width: var(--container-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
}

/* Legacy support */
.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

/* Universal Section Spacing */
.wd-section {
    padding-top: var(--section-spacing);
    padding-bottom: var(--section-spacing);
}

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

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

/* Section Header */
.wd-section-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 60px auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.wd-eyebrow {
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-brand-primary);
    font-weight: 700;
    margin-bottom: 12px;
    display: block;
}

.wd-section-title {
    font-size: 2.5rem;
    margin-bottom: 16px;
    color: var(--color-text-main);
    font-weight: 700;
}

.wd-subhead {
    font-size: 1.125rem;
    color: var(--color-text-secondary);
    line-height: 1.6;
}

/* Spacers */
.mt-sm {
    margin-top: 16px;
}

.mt-md {
    margin-top: 24px;
}

.mt-lg {
    margin-top: 32px;
}

.mt-xl {
    margin-top: 48px;
}

.mb-sm {
    margin-bottom: 16px;
}

.mb-md {
    margin-bottom: 24px;
}

.mb-lg {
    margin-bottom: 32px;
}

.mb-xl {
    margin-bottom: 48px;
}

/* =========================================
   3.5 LAYOUT UTILITIES - HEADER OFFSETS
   ========================================= */
/* =========================================
   3.5 LAYOUT UTILITIES - HEADER OFFSETS
   ========================================= */
/* Global Safe Zone for Fixed Header */
.site-content,
.wd-single-product-container,
.archive .products,
.page-template-default .site-main,
#primary {
    padding-top: var(--header-total-offset) !important;
}

/* Fix Hero Gap on Homepage & Portfolio & Shop */
.home #primary,
.front-page #primary,
.post-type-archive-portfolio #primary,
.tax-portfolio_cat #primary,
.post-type-archive-product #primary,
.tax-product_cat #primary {
    padding-top: 0 !important;
}

.wd-page-header-spacer {
    padding-top: var(--header-total-offset);
    padding-bottom: var(--space-3xl);
}

/* =========================================
   4. HEADER SYSTEM (Glass Pill)
   ========================================= */
:root {
    --header-pill-height: 80px;
    --header-vertical-padding: 20px;
    /* Space above/below pill */
    --header-total-offset: calc(var(--header-pill-height) + (var(--header-vertical-padding) * 2) + 32px);
    /* Total safe zone */
}

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding: var(--header-vertical-padding) 0;
    transition: padding 0.3s ease;
    pointer-events: none;
    /* Pass clicks through invisible wrapper */
}

/* Shrink State */
.site-header.fixed {
    padding: 10px 0;
}

.header-container {
    background-color: rgba(255, 249, 229, 0.95);
    /* Cream Pill Default */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 999px;
    padding: 0 32px 0 8px;
    /* Left padding reduced for logo slot */
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: var(--shadow-lg);
    width: 95%;
    max-width: var(--container-max);
    margin: 0 auto;
    height: var(--header-pill-height);
    transition: all 0.3s ease;
    pointer-events: auto;
    border: 1px solid var(--color-border);
}

/* Logo Slot (Flex Item) */
.wd-logo-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: #FDE047;
    /* Sunny Yellow (Home/Archives) */
    margin-right: 24px;
    /* Separation from Nav */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    /* Subtle Shadow */
    flex-shrink: 0;
    /* Prevent squish */
    overflow: hidden;
}

.wd-logo-wrap a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.wd-logo-wrap img {
    width: 26px;
    /* Scaled proportional */
    height: auto;
    display: block;
}

/* Single/Inverse Mode */
.single .header-container,
.page .header-container,
.single-product .header-container {
    background-color: #FDE047;
    /* Yellow Pill */
    border-color: rgba(0, 0, 0, 0.05);
}

.single .wd-logo-wrap,
.page .wd-logo-wrap,
.single-product .wd-logo-wrap {
    background-color: #FFFFFF;
    /* White Circle */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    /* Softer shadow */
}

/* Specificity Fix for Home/Archive */
.home .wd-logo-wrap,
.front-page .wd-logo-wrap,
.blog .wd-logo-wrap,
.archive .wd-logo-wrap {
    background-color: #FDE047 !important;
    /* Force Yellow on Main Pages */
}

/* Nav Adjustment */
.main-navigation {
    margin-right: auto;
    display: flex;
    align-items: center;
}

/* Shrink Container */
.site-header.fixed .header-container {
    height: 64px;
    padding: 0 24px;
    box-shadow: var(--shadow-sm);
}

.main-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: var(--space-xs);
}

.main-navigation ul li a {
    display: block;
    background-color: transparent;
    color: var(--color-text-main);
    font-weight: var(--weight-medium);
    font-size: var(--text-sm);
    padding: 8px 16px;
    border-radius: var(--radius-full);
    transition: all 0.2s;
}

.main-navigation ul li a:hover,
.main-navigation ul li.current-menu-item a {
    background-color: var(--color-brand-primary);
    color: var(--color-text-inverse);
    box-shadow: var(--shadow-sm);
}

/* 3. CTA & Actions (Right) */
.header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.btn-bundle {
    background-color: var(--color-text-main);
    /* Dark Navy/Black */
    color: var(--color-text-inverse) !important;
    font-weight: 700;
    padding: 12px 28px;
    /* Slightly larger premium hit area */
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    /* Soft premium shadow */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    /* Tracked out */
    display: inline-flex;
    /* Better centering */
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    line-height: 1;
}

.btn-bundle:hover {
    background-color: #000;
    /* Darker Black */
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    /* Lift effect */
    color: white;
}

.site-header.fixed .btn-bundle {
    padding: 8px 20px;
}

/* Mobile Toggle */
.menu-toggle {
    display: none;
    background: transparent;
    border: none;
    color: var(--color-text-main);
    font-size: 24px;
    cursor: pointer;
    padding: 0;
}

/* =========================================
   HERO SECTION
========================================= */
/* =========================================
   5. HERO SECTION REFINEMENT
   ========================================= */
.wd-hero-block {
    background-color: var(--color-bg-hero);
    /* Ensure background goes behind header */
    padding-top: calc(var(--header-height) + 64px);
    /* Reduced top spacing */
    padding-bottom: 64px;
    position: relative;
    overflow: hidden;
    margin-top: -1px;
    /* Fix any sub-pixel gaps */
}

.hero-grid {
    display: grid;
    /* 60/40 Split */
    grid-template-columns: 1.4fr 1fr;
    gap: 80px;
    /* Increased gap */
    align-items: center;
}

.hero-content {
    padding-right: 24px;
}

.hero-content h1 {
    font-size: clamp(3.5rem, 6vw, 5.5rem);
    /* Larger, bolder text */
    line-height: 1.05;
    margin-bottom: 32px;
    color: var(--color-text-main);
    letter-spacing: -0.03em;
}

.hero-content p {
    font-size: 1.35rem;
    margin-bottom: 48px;
    color: var(--color-text-secondary);
    max-width: 90%;
    line-height: 1.6;
}

/* Visual Card Refinement */
.hero-visual img {
    border-radius: 24px;
    /* Match system radius */
    box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.12);
    /* Softer, deeper shadow */
    transform: perspective(1000px) rotateY(-2deg) rotateX(2deg);
    transition: transform 0.5s ease, box-shadow 0.5s ease;
}

.hero-visual:hover img {
    transform: perspective(1000px) rotateY(0) rotateX(0);
    box-shadow: 0 40px 70px -15px rgba(0, 0, 0, 0.15);
}

/* =========================================
   MOBILE / TABLET STYLES
========================================= */
@media (max-width: 960px) {
    :root {
        --header-pill-height: 70px;
        --header-vertical-padding: 10px;
    }

    .site-header {
        padding: var(--header-vertical-padding) 0;
    }

    .header-container {
        padding-left: 8px;
        /* Match desktop reasoning */
        height: var(--header-pill-height);
    }

    .wd-logo-wrap {
        width: 40px;
        height: 40px;
        margin-right: 12px;
    }

    .wd-logo-wrap img {
        width: 20px;
    }

    .desk-cta {
        display: none;
    }

    .menu-toggle {
        display: block;
    }

    /* Mobile Menu Overlay */
    .main-navigation {
        display: none;
        /* Hidden by default */
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(255, 255, 255, 0.98);
        z-index: 1500;
        align-items: center;
        justify-content: center;
        padding: var(--space-xl);
        flex-direction: column;
        transition: opacity 0.3s ease;
    }

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

    .main-navigation ul {
        flex-direction: column;
        gap: var(--space-lg);
        text-align: center;
    }

    .main-navigation ul li a {
        font-size: var(--text-2xl);
        font-weight: var(--weight-bold);
        background: transparent;
        color: var(--color-text-main);
    }

    .hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
        gap: var(--space-xl);
    }

    .hero-content p {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-visual {
        order: -1;
    }

    .hero-visual img {
        transform: none;
        margin: 0 auto;
        max-width: 80%;
    }

    /* Mobile CTA */
    .mobile-cta-container {
        display: block;
        margin-top: 20px;
        padding-top: 20px;
        border-top: 1px solid rgba(0, 0, 0, 0.05);
    }

    .mobile-btn {
        width: 100%;
        display: block;
        text-align: center;
        padding: 15px !important;
    }
}

/* Desktop: Hide Mobile CTA */
@media (min-width: 961px) {
    .mobile-cta-container {
        display: none;
    }
}

/* Body Lock */
body.menu-open {
    overflow: hidden;
}

/* Legacy Hero Removed */

/* =========================================
   BUTTON VARIANTS
========================================= */
/* =========================================
   4. BUTTONS
   ========================================= */
.btn-primary,
.btn-bundle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-text-main);
    /* Premium Black/Navy */
    color: #fff !important;
    padding: 16px 32px;
    border-radius: 9999px;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.2s ease;
    border: none;
    cursor: pointer;
    text-decoration: none;
    box-shadow: var(--shadow-md);
}

.btn-primary:hover,
.btn-bundle:hover {
    background-color: var(--color-brand-primary);
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    color: #fff !important;
}

.btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 2px solid var(--color-border);
    color: var(--color-text-main);
    padding: 14px 30px;
    border-radius: 9999px;
    font-weight: 600;
    transition: all 0.2s ease;
}

.btn-outline:hover {
    border-color: var(--color-text-main);
    background: var(--color-text-main);
    color: #fff;
}

/* =========================================
   FEATURES (FIVERR)
========================================= */
/* =========================================
   7. EXPERT SERVICES
   ========================================= */
.wd-services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
}

.service-card {
    background: var(--color-bg-card);
    padding: 32px;
    border-radius: var(--radius-md);
    text-align: center;
    border: 1px solid var(--color-border);
    transition: all 0.3s ease;
}

.service-card:hover {
    transform: translateY(-5px);
    border-color: var(--color-brand-primary);
    box-shadow: var(--shadow-hover);
}

.service-icon {
    width: 64px;
    height: 64px;
    background: var(--color-bg-highlight);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px auto;
    color: var(--color-brand-primary);
    font-size: 24px;
}

.service-card h4 {
    font-size: 1.125rem;
    margin-bottom: 8px;
    color: var(--color-text-main);
    font-weight: 600;
}

.service-card span {
    font-size: 0.875rem;
    color: var(--color-text-light);
}

/* Cleanup Legacy */
.features-section {
    display: none;
}

/* =========================================
   NEWSLETTER
========================================= */
.newsletter-section {
    padding: 100px 0;
    background-color: white;
}

/* =========================================
   8. NEWSLETTER
   ========================================= */
.wd-section-newsletter {
    background-color: var(--color-bg-hero);
    /* Extend Yellow Theme */
}

.newsletter-wrapper {
    background: transparent;
    /* Blend with section */
    border-radius: var(--radius-lg);
    padding: 64px 0;
    /* Remove box styling, make it open */
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
    color: var(--color-text-main);
    /* Switch to dark text for yellow bg */
    overflow: hidden;
    position: relative;
    max-width: 100%;
}

.newsletter-content h2 {
    color: var(--color-text-main);
    /* Dark Text */
    font-size: 2.5rem;
    margin-bottom: 16px;
    font-weight: 800;
    text-transform: uppercase;
}

.newsletter-content p {
    color: var(--color-text-secondary);
    font-size: 1.125rem;
}

.newsletter-form {
    display: flex;
    gap: 16px;
    margin-top: 32px;
}

.newsletter-form input {
    flex: 1;
    padding: 16px 24px;
    border-radius: 9999px;
    border: 2px solid transparent;
    font-family: var(--font-body);
}

.newsletter-form input:focus {
    outline: none;
    border-color: var(--color-brand-primary);
}

.newsletter-visual {
    display: flex;
    justify-content: center;
    font-size: 8rem;
}

.gift-box-placeholder {
    display: none;
}

@media (max-width: 768px) {
    .newsletter-wrapper {
        grid-template-columns: 1fr;
        text-align: center;
        padding: 40px 0;
    }

    .newsletter-form {
        flex-direction: column;
        max-width: 400px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* =========================================
   WOOCOMMERCE GRID FIX
========================================= */
.woocommerce ul.products {
    display: grid;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 30px;
}

.woocommerce ul.products:before,
.woocommerce ul.products:after {
    display: none !important;
    /* Fix float clears breaking grid */
}

@media (max-width: 900px) {
    .woocommerce ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 600px) {
    .woocommerce ul.products {
        grid-template-columns: 1fr !important;
    }
}

/* [Removed orphaned CSS] */

/* Footer */
.site-footer {
    background-color: #fff;
    padding: 60px 0;
    margin-top: 0;
}

/* Floating Fiverr Badge */
.floating-fiverr-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background-color: #1DBF73;
    color: white;
    padding: 15px 25px;
    border-radius: 50px;
    font-weight: 700;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    z-index: 9999;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.floating-fiverr-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(29, 191, 115, 0.4);
    color: white;
}

/* Global Filter Pills (Portfolio & Shop) */
.portfolio-filters .filter-btn,
.wd-container .filter-btn {
    display: inline-block;
    padding: 10px 24px;
    margin: 0 4px 8px;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    background: white;
    color: var(--color-text-secondary);
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
}

.portfolio-filters .filter-btn:hover,
.portfolio-filters .filter-btn.active,
.wd-container .filter-btn:hover,
.wd-container .filter-btn.active {
    background: var(--color-text-main);
    color: white;
    border-color: var(--color-text-main);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}


/* =========================================
   RESPONSIVENESS & MOBILE MENU
========================================= */

/* Mobile Menu Toggle Button (Hamburger) */
.menu-toggle {
    display: none;
    /* Hidden on Desktop */
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--color-text-main);
    padding: 10px;
    z-index: 2000;
}

@media (max-width: 900px) {
    .site-header {
        width: 100%;
        top: 0;
        left: 0;
        transform: none;
        max-width: none;
    }

    .header-container {
        border-radius: 0;
        border: none;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        padding: 15px 20px;
        background: rgba(255, 255, 255, 0.95);
    }

    .menu-toggle {
        display: block;
        /* Show on Mobile */
    }

    /* Full Screen Overlay Menu */
    .main-navigation ul {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: linear-gradient(135deg, #FFFBEB 0%, #FFFFFF 100%);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 40px;
        z-index: 1500;
        transform: translateY(-100%);
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        opacity: 0;
    }

    .main-navigation.toggled ul {
        transform: translateY(0);
        opacity: 1;
    }

    .main-navigation ul li a {
        font-size: 1.5rem;
        /* Larger font for touch */
        font-weight: 800;
    }

    .header-cta {
        display: none;
        /* Hide CTA button in header, maybe add to menu later if needed */
    }
}

/* =========================================
   SINGLE PRODUCT PAGE
========================================= */
.single-product-container {
    padding-top: 40px;
    padding-bottom: 80px;
}

.product-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 60px;
}

.product-gallery {
    position: relative;
}

.product-summary-sticky {
    position: sticky;
    top: 120px;
    height: fit-content;
}

.product-breadcrumb {
    margin-bottom: 15px;
    font-size: 0.9rem;
    color: #9CA3AF;
}

.product-title {
    font-size: 2.5rem;
    line-height: 1.2;
    margin-bottom: 15px;
    color: #1F2937;
}

.product-price {
    font-size: 1.5rem;
    color: #059669;
    font-weight: 700;
    margin-bottom: 25px;
}

.product-short-desc {
    color: #4B5563;
    line-height: 1.6;
    margin-bottom: 30px;
}

.add-to-cart-box {
    background: #F9FAFB;
    padding: 25px;
    border-radius: 20px;
    margin-bottom: 30px;
}

.trust-badges-row {
    display: flex;
    gap: 20px;
    align-items: center;
    border-top: 1px solid #E5E7EB;
    padding-top: 20px;
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: #6B7280;
}

/* Single Product Buttons */
.single_add_to_cart_button {
    background-color: #1F2937 !important;
    /* Navy */
    color: white !important;
    border-radius: 99px !important;
    padding: 15px 40px !important;
    font-weight: 600 !important;
    transition: background 0.3s;
}

.single_add_to_cart_button:hover {
    background-color: #000 !important;
}

/* Buy Now Button - Added via Hook */
.buy_now_button {
    display: block;
    width: 100%;
    text-align: center;
    background-color: var(--color-cta-coral);
    /* Orange Pop */
    color: white !important;
    border-radius: 99px;
    padding: 15px 40px;
    font-weight: 700;
    margin-top: 15px;
    text-transform: uppercase;
    transition: all 0.2s;
    box-shadow: 0 4px 0 #EA580C;
}

.buy_now_button:hover {
    background-color: var(--color-cta-hover);
    transform: translateY(2px);
    box-shadow: 0 2px 0 #EA580C;
}

/* Product Tabs */
.product-tabs-wrapper {
    margin-top: 80px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* Responsive Single Product */
@media (max-width: 900px) {
    .product-grid {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
    }

    .product-summary-sticky {
        position: static !important;
    }

    .product-title {
        font-size: 2rem;
    }
}


@media (max-width: 768px) {

    /* Hero Stacking */
    .hero-section .container {
        flex-direction: column-reverse;
        /* Text on top? Or Image on top? Let's do Standard Stacking: Content Top */
        flex-direction: column;
        text-align: center;
        gap: 30px;
    }

    .hero-section {
        padding-top: 100px;
        /* Less padding since header is smaller */
        padding-bottom: 60px;
    }

    .hero-section h1 {
        font-size: 2.5rem;
    }

    /* Grid Adjustments */
    .bundles-grid,
    .features-grid {
        grid-template-columns: 1fr;
        /* Single Column */
    }

    .woocommerce ul.products li.product {
        background: white;
        border-radius: var(--radius-soft);
        padding: 2rem;
        border: 3px solid #f0f0f0;
        transition: transform 0.2s;
        text-align: center;
    }

    .card:hover {
        transform: translateY(-5px);
    }

    /* Variants */
    .card-pink {
        border-color: var(--color-card-pink);
        background: #FFF1F2;
    }

    .card-blue {
        border-color: var(--color-card-blue);
        background: #F0F9FF;
    }

    .card-yellow {
        border-color: var(--color-card-yellow);
        background: #FEFCE8;
    }

    /* WooCommerce */
    .woocommerce ul.products li.product {
        border: 3px solid var(--color-card-blue) !important;
        background: #F0F9FF;
    }

    .woocommerce ul.products li.product .button {
        background-color: var(--color-card-yellow) !important;
        color: black !important;
        border-radius: 10px;
        text-transform: uppercase;
        font-weight: 800;
        box-shadow: 0 3px 0 #D97706;
        margin-top: 15px;
    }

    /* Friends Section */
    .features-section {
        background-color: var(--color-hero-teal);
        color: white;
        padding: 100px 0;
    }

    .feature-card .icon {
        background: white;
        width: 120px;
        height: 120px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 20px;
        color: var(--color-text-main);
        box-shadow: 0 5px 0 rgba(0, 0, 0, 0.1);
    }

    /* Footer */
    .site-footer {
        background-color: #fff;
        padding: 60px 0;
        margin-top: 0;
    }

    /* Floating Fiverr Badge */
    .floating-fiverr-btn {
        position: fixed;
        bottom: 30px;
        right: 30px;
        background-color: #1DBF73;
        color: white;
        padding: 15px 25px;
        border-radius: 50px;
        font-weight: 700;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
        z-index: 9999;
        text-decoration: none;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .floating-fiverr-btn:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 25px rgba(29, 191, 115, 0.4);
        color: white;
    }

    /* =========================================
   RESPONSIVENESS & MOBILE MENU
========================================= */

    /* Mobile Menu Toggle Button (Hamburger) */
    .menu-toggle {
        display: none;
        /* Hidden on Desktop */
        background: none;
        border: none;
        font-size: 1.5rem;
        cursor: pointer;
        color: var(--color-text-main);
        padding: 10px;
        z-index: 2000;
    }

    @media (max-width: 900px) {
        .site-header {
            width: 100%;
            top: 0;
            left: 0;
            transform: none;
            max-width: none;
        }

        .header-container {
            border-radius: 0;
            border: none;
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
            padding: 15px 20px;
            background: rgba(255, 255, 255, 0.95);
        }

        .menu-toggle {
            display: block;
            /* Show on Mobile */
        }

        /* Full Screen Overlay Menu */
        .main-navigation ul {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background: linear-gradient(135deg, #FFFBEB 0%, #FFFFFF 100%);
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 40px;
            z-index: 1500;
            transform: translateY(-100%);
            transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            opacity: 0;
        }

        .main-navigation.toggled ul {
            transform: translateY(0);
            opacity: 1;
        }

        .main-navigation ul li a {
            font-size: 1.5rem;
            /* Larger font for touch */
            font-weight: 800;
        }

        .header-cta {
            display: none;
            /* Hide CTA button in header, maybe add to menu later if needed */
        }
    }

    @media (max-width: 768px) {

        /* Hero Stacking */
        .hero-section .container {
            flex-direction: column-reverse;
            /* Text on top? Or Image on top? Let's do Standard Stacking: Content Top */
            flex-direction: column;
            text-align: center;
            gap: 30px;
        }

        .hero-section {
            padding-top: 100px;
            /* Less padding since header is smaller */
            padding-bottom: 60px;
        }

        .hero-section h1 {
            font-size: 2.5rem;
        }

        /* Grid Adjustments */
        .bundles-grid,
        .features-grid {
            grid-template-columns: 1fr;
            /* Single Column */
        }

        .newsletter-section .container {
            flex-direction: column;
            text-align: center;
        }

        .newsletter-section h2 {
            text-align: center;
        }
    }
}

/* =========================================
   WOOCOMMERCE SHOP STYLING (v3.0 Modern)
========================================= */

/* Grid Layout */
.woocommerce ul.products {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 40px;
    margin: 0;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after {
    display: none;
}

/* Modern Premium Card Base */
.woocommerce ul.products li.product {
    width: 100%;
    margin: 0 !important;
    float: none !important;
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: visible;
    /* Allow shadows */
    position: relative;
    border: none;
    /* No borders */
    background: white;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
    /* Ultra soft base shadow */
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* Hover: Lift & Glow */
.woocommerce ul.products li.product:hover {
    transform: translateY(-8px);
    z-index: 10;
}

/* Colored Glow Shadows (Cycle) */
/* Uniform Colored Glow Shadows (Teal) */
.woocommerce ul.products li.product:hover {
    box-shadow: 0 20px 50px rgba(20, 184, 166, 0.25);
}

/* Image Area */
.woocommerce ul.products li.product a {
    display: block;
    overflow: hidden;
    border-radius: 20px 20px 0 0;
}

.woocommerce ul.products li.product a img {
    width: 100%;
    height: 280px;
    object-fit: cover;
    margin: 0;
    transition: transform 0.6s cubic-bezier(0.215, 0.610, 0.355, 1);
    background: #f9fafb;
}

.woocommerce ul.products li.product:hover a img {
    transform: scale(1.08);
    /* Zoom effect */
}

/* Content Area */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    padding: 20px 20px 5px;
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--color-text-main);
    text-align: center;
}

.woocommerce ul.products li.product .price {
    display: block;
    padding: 0 20px;
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--color-hero-teal);
    margin-bottom: 15px;
    text-align: center;
}

/* Buttons Container (Shop Loop) */
.woocommerce ul.products li.product .button {
    margin: 0 25px 25px;
    width: calc(100% - 50px);
    text-align: center;
    border-radius: 50px;
    padding: 12px;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s;
    font-size: 0.9rem;
    background: linear-gradient(135deg, #14B8A6 0%, #0D9488 100%) !important;
    /* Teal Gradient */
    color: white !important;
    box-shadow: 0 6px 15px rgba(20, 184, 166, 0.2);
    border: none;
}

.woocommerce ul.products li.product .button:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(20, 184, 166, 0.3);
}

/* Change Icon to Eye for View Details */
.woocommerce ul.products li.product .button::before {
    content: '👀';
}

/* Hide PayPal in Grid (It's now added via PHP to Single Page only, but just in case) */
.woocommerce ul.products li.product .paypal-button {
    display: none;
}

/* Remove 'Added to Cart' text */
.woocommerce ul.products li.product .added_to_cart {
    display: none;
}

/* Sale Badge */
.woocommerce span.onsale {
    background-color: var(--color-card-yellow);
    color: black;
    font-weight: 800;
    border-radius: 50px;
    padding: 5px 15px;
    min-height: auto;
    line-height: 1.5;
    top: 15px;
    left: 15px;
    right: auto;
    box-shadow: 0 4px 10px rgba(217, 119, 6, 0.2);
}

/* Product Grid Container */
.woocommerce ul.products {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* Strict 3 Columns */
    gap: 30px;
    margin: 0;
}

@media (max-width: 992px) {
    .woocommerce ul.products {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .woocommerce ul.products {
        grid-template-columns: 1fr;
    }
}

/* =========================================
   SINGLE PRODUCT PAGE STYLING
========================================= */

.woocommerce div.product .product_title {
    font-size: 2.5rem;
    font-weight: 900;
    text-transform: uppercase;
    color: var(--color-hero-teal);
    line-height: 1.1;
    margin-bottom: 20px;
}

.woocommerce div.product p.price {
    font-size: 2rem;
    font-weight: 800;
    color: var(--color-btn-pop);
    margin-bottom: 30px;
}

/* Stacked Buttons on Single Product */
.woocommerce div.product form.cart {
    display: flex;
    flex-direction: column;
    gap: 15px;
    max-width: 400px;
    /* Keep them neat */
}

/* Add to Cart (Single) - Teal Gradient */
.woocommerce div.product form.cart .button {
    background: linear-gradient(135deg, #14B8A6 0%, #0D9488 100%) !important;
    border-radius: 50px;
    padding: 15px 40px;
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    color: white !important;
    border: none;
    box-shadow: 0 6px 15px rgba(20, 184, 166, 0.3);
    transition: transform 0.2s;
    width: 100%;
    /* Full width in container */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.woocommerce div.product form.cart .button::before {
    content: '🛒';
}

.woocommerce div.product form.cart .button:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(20, 184, 166, 0.4);
}

/* PayPal Button (Single) - Blue/White - Inserted via Hook */
.paypal-button {
    background: white !important;
    color: #003087 !important;
    border: 2px solid #003087 !important;
    border-radius: 50px;
    padding: 15px 40px;
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    display: flex;
    /* Flex to center text */
    justify-content: center;
    align-items: center;
    gap: 10px;
    transition: all 0.2s;
    box-shadow: none;
}

.paypal-button::before {
    content: '🅿️';
}

.paypal-button:hover {
    background: #003087 !important;
    color: white !important;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 48, 135, 0.2);
}

/* Cleaned up broken CSS block */
.woocommerce ul.products li.product {
    display: flex;
    flex-direction: column;
}

/* 1. Add to Cart (Teal) */
.woocommerce ul.products li.product .button {
    background: linear-gradient(135deg, #14B8A6 0%, #0D9488 100%) !important;
    color: white !important;
    box-shadow: 0 6px 15px rgba(20, 184, 166, 0.2);
    border: none;
    margin: 0 25px 10px;
    /* Restoring margins that were orphaned */
    width: calc(100% - 50px);
    border-radius: 50px;
}

.woocommerce ul.products li.product .button:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(20, 184, 166, 0.3);
}

.woocommerce ul.products li.product .button::before {
    content: '🛒';
    margin-right: 8px;
}

/* 2. PayPal (Blue/Gold) */
.woocommerce ul.products li.product .paypal-button {
    background: white !important;
    color: #003087 !important;
    border: 2px solid #003087;
    margin: 0 25px 25px;
    /* Restoring margins */
    width: calc(100% - 50px);
    border-radius: 50px;
    text-align: center;
}

.woocommerce ul.products li.product .paypal-button:hover {
    background: #003087 !important;
    color: white !important;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 48, 135, 0.2);
}

.woocommerce ul.products li.product .paypal-button::before {
    content: '🅿️';
    margin-right: 8px;
}

/* Remove 'Added to Cart' text */
.woocommerce ul.products li.product .added_to_cart {
    display: none;
}

/* Sale Badge */
.woocommerce span.onsale {
    background-color: var(--color-card-yellow);
    color: black;
    font-weight: 800;
    border-radius: 50px;
    padding: 5px 15px;
    min-height: auto;
    line-height: 1.5;
    top: 15px;
    left: 15px;
    right: auto;
    box-shadow: 0 4px 10px rgba(217, 119, 6, 0.2);
}

/* Grid Layout Fix */
.woocommerce ul.products {
    display: grid;
    grid-template-columns: repeat(3, 1fr) !important;
    /* Force 3 cols */
    gap: 30px;
    margin: 0;
}

@media (max-width: 992px) {
    .woocommerce ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 600px) {
    .woocommerce ul.products {
        grid-template-columns: 1fr !important;
    }
}

.woocommerce ul.products::before,
.woocommerce ul.products::after {
    display: none;
}

/* Product Card Base */
.woocommerce ul.products li.product {
    width: 100%;
    /* Reset WC width */
    margin: 0 !important;
    float: none !important;
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    position: relative;
    border: 3px solid #eee;
    background: white;
    border-radius: 20px;
    transition: transform 0.2s;
}

.woocommerce ul.products li.product:hover {
    transform: translateY(-5px);
}

/* Cycle Border Colors */
/* Uniform Product Card Base */
.woocommerce ul.products li.product {
    border-color: #f0f0f0;
    background: white;
}

/* Image Area */
.woocommerce ul.products li.product a img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    margin: 0;
    border-bottom: 2px solid rgba(0, 0, 0, 0.05);
    background: white;
    /* Fallback */
}

/* Content Area */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    padding: 20px 20px 5px;
    font-size: 1.1rem;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--color-text-main);
    line-height: 1.3;
}

.woocommerce ul.products li.product .price {
    display: block;
    padding: 0 20px;
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--color-btn-pop);
    margin-bottom: 15px;
}

.woocommerce ul.products li.product .button {
    margin: 0 20px 25px;
    text-align: center;
    background: linear-gradient(135deg, #14B8A6 0%, #0D9488 100%) !important;
    /* Premium Gradient */
    color: white !important;
    border-radius: 50px;
    /* Pill Shape */
    padding: 12px 24px;
    font-weight: 700;
    text-transform: uppercase;
    box-shadow: 0 6px 15px rgba(20, 184, 166, 0.3);
    /* Colored Shadow */
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    /* Bouncy transition */
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    /* Space for icon */
    border: none;
}

.woocommerce ul.products li.product .button::before {
    content: '🛒';
    font-size: 1.2em;
}

.woocommerce ul.products li.product .button:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 10px 20px rgba(20, 184, 166, 0.4);
    background: linear-gradient(135deg, #2DD4BF 0%, #14B8A6 100%) !important;
    /* Lighter on hover */
}

.woocommerce ul.products li.product .button:active {
    transform: translateY(-1px) scale(0.98);
    box-shadow: 0 4px 10px rgba(20, 184, 166, 0.3);
}

.woocommerce ul.products li.product .added_to_cart {
    display: block;
    text-align: center;
    padding-bottom: 15px;
    font-weight: 600;
    color: var(--color-text-muted);
}

/* =========================================
   WOOCOMMERCE COMPLETE POLISH (v4.0)
========================================= */

/* --- 1. SINGLE PRODUCT PAGE (Shopify-Style v5.0) --- */

/* Main Container (Grid) */
.woocommerce div.product {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 60px;
    align-items: start;
    padding-top: 40px;
}

/* Column 1: Images */
.woocommerce div.product div.images {
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
    background: transparent;
    padding: 0;
    border: none;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.woocommerce div.product div.images img {
    width: 100%;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05) !important;
    border: 1px solid rgba(0, 0, 0, 0.03);
}

/* Column 2: Sticky Summary */
.woocommerce div.product div.summary {
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
    padding: 30px;
    position: sticky;
    top: 100px;
    /* Sticks below header */
    background: white;
    border-radius: 20px;
    border: 1px solid #f0f0f0;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
}

/* Mobile Reset */
@media (max-width: 900px) {
    .woocommerce div.product {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .woocommerce div.product div.summary {
        position: static;
        padding: 20px;
    }
}

/* Typography Overhaul */
.woocommerce div.product .product_title {
    font-family: var(--font-heading);
    font-size: 2.5rem !important;
    font-weight: 800;
    color: var(--color-text-main);
    line-height: 1.1;
    margin-bottom: 10px;
    letter-spacing: -0.5px;
}

.woocommerce div.product p.price {
    font-family: var(--font-body);
    font-size: 2.2rem !important;
    font-weight: 800;
    color: var(--color-hero-teal);
    margin-bottom: 25px;
    display: block;
}

.woocommerce div.product p.price del {
    font-size: 1.2rem !important;
    color: #9CA3AF;
    font-weight: 500;
    margin-right: 10px;
}

/* Buy Box Layout */
.woocommerce div.product form.cart {
    background: #F8FAFC;
    padding: 25px;
    border-radius: 15px;
    border: 1px solid #E2E8F0;
    margin-bottom: 30px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Add to Cart - Massive & Clean */
.woocommerce div.product form.cart .button {
    background: black !important;
    /* Shopify Standard */
    color: white !important;
    width: 100%;
    padding: 18px 0;
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 10px;
    /* Softer */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    transition: transform 0.2s, background 0.2s;
    border: none;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.woocommerce div.product form.cart .button:hover {
    background: #333 !important;
    transform: translateY(-2px);
}

.woocommerce div.product form.cart .button::before {
    content: '🛍️';
}

/* PayPal Secondary */
.woocommerce div.product form.cart .paypal-button {
    background: #FFC439 !important;
    /* PayPal Gold */
    color: black !important;
    border-radius: 10px;
    padding: 18px 0;
    font-weight: 700;
    text-transform: uppercase;
    border: none;
    width: 100%;
    text-align: center;
    display: block;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.woocommerce div.product form.cart .paypal-button:before {
    content: '';
}

/* Metadata */
.product_meta {
    font-size: 0.85rem;
    color: #64748B;
    border-top: 1px solid #eee;
    padding-top: 20px;
    margin-top: 20px;
}

.product_meta span {
    display: block;
    margin-bottom: 5px;
}

/* Refined Tabs */
.woocommerce div.product .woocommerce-tabs {
    grid-column: 1 / -1;
    /* Full Width below */
    margin-top: 60px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
    justify-content: center;
    border-bottom: 2px solid #F1F5F9;
    padding: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
    color: black;
    border-bottom: 2px solid black;
}

/* --- 2. CART PAGE --- */
/* Glass Table */
.woocommerce-cart-form__contents {
    border: none !important;
    background: white;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.03);
    overflow: hidden;
}

.woocommerce table.shop_table th {
    background: #f0fdfa;
    color: var(--color-hero-teal);
    text-transform: uppercase;
    font-weight: 800;
    padding: 20px;
    border: none;
}

.woocommerce table.shop_table td {
    padding: 20px;
    border-top: 1px solid #f0f0f0;
    vertical-align: middle;
}

/* Quantity Input - Pill */
.woocommerce .quantity .qty {
    border-radius: 50px;
    padding: 10px;
    text-align: center;
    border: 2px solid #eee;
    width: 80px;
    font-weight: 700;
    color: var(--color-hero-teal);
}

/* Cart Totals - Glass Card */
.cart_totals {
    background: white;
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    margin-top: 40px;
}

.cart_totals h2 {
    font-size: 1.8rem;
    color: var(--color-hero-teal);
    margin-bottom: 20px;
    text-transform: uppercase;
}

/* --- 3. CHECKOUT PAGE --- */
/* Form Fields - Modern Inputs */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea {
    padding: 15px 20px;
    border: 2px solid #eee;
    border-radius: 12px;
    font-size: 1rem;
    transition: all 0.3s;
    background: #fff;
    width: 100%;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus {
    border-color: var(--color-hero-teal);
    box-shadow: 0 0 0 4px rgba(20, 184, 166, 0.1);
    outline: none;
}

/* Payment Box - Clean */
#payment {
    background: #F0F9FF !important;
    border-radius: 20px !important;
    padding: 30px !important;
}

#payment ul.payment_methods {
    border: none !important;
    padding: 0 !important;
}

#payment ul.payment_methods li {
    background: white;
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02);
}

/* Place Order Button - Big & Bold */
#place_order {
    background: var(--color-btn-pop) !important;
    width: 100%;
    padding: 20px !important;
    font-size: 1.2rem !important;
    border-radius: 50px !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    box-shadow: 0 10px 25px rgba(244, 63, 94, 0.4);
    margin-top: 20px;
    transition: transform 0.2s;
}

#place_order:hover {
    transform: translateY(-2px);
}

/* Sticky Checkout Logic (Shopify Style) */
@media (min-width: 1000px) {
    .woocommerce-checkout {
        display: grid;
        grid-template-columns: 1.5fr 1fr;
        gap: 60px;
    }

    #customer_details {
        grid-column: 1;
    }

    #order_review_heading,
    #order_review {
        grid-column: 2;
    }

    #order_review {
        position: sticky;
        top: 100px;
        /* Below fixed header */
        background: white;
        padding: 40px;
        border-radius: 20px;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
        border: 1px solid #f0f0f0;
    }
}

/* --- 4. GLOBAL UI --- */
/* Alerts / Notices */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    background: white !important;
    border: none !important;
    border-left: 5px solid var(--color-hero-teal) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    padding: 20px 30px !important;
    color: var(--color-text-main) !important;
    font-weight: 600;
    margin-bottom: 30px !important;
}

.woocommerce-error {
    border-left-color: var(--color-btn-pop) !important;
}

.woocommerce-info {
    border-left-color: var(--color-card-blue) !important;
}

/* Breadcrumbs (Hide if messy, or style) */
.woocommerce-breadcrumb {
    color: var(--color-text-muted);
    font-size: 0.9rem;
    margin-bottom: 30px;
}


/* =========================================
   SHOP & SINGLE PRODUCT REFINEMENT
========================================= */

/* Hero is inline styled in template, but we can add responsive tweaks here */
@media (max-width: 768px) {
    .shop-hero {
        padding: 50px 20px !important;
        border-radius: 20px !important;
    }

    .shop-title {
        font-size: 2.2rem !important;
    }
}

/* --- Product Cards --- */
.woocommerce ul.products li.product {
    background: white;
    border-radius: 20px;
    overflow: hidden;
    padding: 0 !important;
    /* Reset default padding */
    border: 1px solid #f0f0f0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: flex;
    flex-direction: column;
}

.woocommerce ul.products li.product:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
    border-color: var(--color-hero-teal);
}

/* Thumbnail Area */
.woocommerce ul.products li.product a img {
    border-radius: 0;
    width: 100%;
    height: 300px;
    /* Fixed height */
    object-fit: cover;
    margin: 0 !important;
    transition: transform 0.5s;
}

.woocommerce ul.products li.product:hover a img {
    transform: scale(1.05);
}

/* Content Area */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-family: var(--font-heading);
    font-size: 1.3rem !important;
    color: #111;
    padding: 20px 20px 5px !important;
    margin: 0 !important;
}

.woocommerce ul.products li.product .price {
    font-family: var(--font-body);
    font-size: 1.4rem !important;
    color: var(--color-hero-teal) !important;
    font-weight: 800;
    padding: 0 20px 20px !important;
    margin: 0 !important;
    display: block;
}

.woocommerce ul.products li.product .price del {
    color: #ccc !important;
    font-size: 0.9rem !important;
    opacity: 0.7;
    font-weight: 400;
}

/* Buttons */
.woocommerce ul.products li.product .button {
    margin: 0 20px 20px !important;
    width: calc(100% - 40px) !important;
    text-align: center;
    border-radius: 12px !important;
    background: #f3f4f6 !important;
    color: #111 !important;
    font-weight: 700 !important;
    padding: 12px !important;
    transition: all 0.2s;
    display: block;
}

.woocommerce ul.products li.product:hover .button {
    background: var(--color-hero-teal) !important;
    color: white !important;
}

/* Sale Flash Badge */
.woocommerce span.onsale {
    top: 15px !important;
    left: 15px !important;
    right: auto !important;
    bottom: auto !important;
    background: var(--color-btn-pop) !important;
    color: white !important;
    font-weight: 700;
    font-size: 0.85rem !important;
    padding: 5px 15px !important;
    border-radius: 50px !important;
    min-height: auto !important;
    min-width: auto !important;
    line-height: normal !important;
    box-shadow: 0 4px 10px rgba(246, 224, 94, 0.4);
}

/* --- Single Product Page --- */

/* 1. Image Column: Polaroid Look */
.single-product-grid .images-wrapper {
    background: white;
    padding: 20px;
    border: 1px solid #f0f0f0;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.02);
}



/* Tabs */
.woocommerce-tabs ul.tabs {
    padding: 0 !important;
    border-bottom: 1px solid #eee !important;
}

.woocommerce-tabs ul.tabs li {
    background: transparent !important;
    border: none !important;
}

.woocommerce-tabs ul.tabs li a {
    color: #999;
    font-weight: 700;
    padding: 15px 20px !important;
}

.woocommerce-tabs ul.tabs li.active a {
    color: var(--color-hero-teal);
    border-bottom: 3px solid var(--color-hero-teal);
}

/* Related Products */



.site-footer {
    background: #CCFBF1;
    /* Pastel Teal */
    color: #0F766E;
}

@media (max-width: 992px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        /* 2 cols on tablet */
    }
}

@media (max-width: 600px) {
    .site-footer {
        border-radius: 40px 40px 0 0;
        padding: 50px 0 30px;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        /* 1 col on mobile */
        gap: 40px;
    }

    .copyright-bar {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
}

/* =========================================
   WOOCOMMERCE SHOP CARDS (Refined)
========================================= */
.wd-product-card {
    background: white;
    border-radius: 20px;
    padding: 15px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.04);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    height: 100%;
    display: flex;
    flex-direction: column;
    border: 1px solid transparent;
}

.wd-product-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
    border-color: #F3F4F6;
}

.wd-product-image {
    display: block;
    border-radius: 15px;
    overflow: hidden;
    margin-bottom: 15px;
    aspect-ratio: 1/1;
    position: relative;
}

.wd-product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.wd-product-card:hover .wd-product-image img {
    transform: scale(1.05);
}

.wd-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #FEF3C7;
    color: #D97706;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    z-index: 2;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.wd-product-details {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.wd-product-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 5px;
    line-height: 1.4;
}

.wd-product-title a {
    color: #1F2937;
    text-decoration: none;
    transition: color 0.2s;
}

.wd-product-title a:hover {
    color: var(--color-hero-teal);
}

.wd-product-cat {
    font-size: 0.85rem;
    color: #9CA3AF;
    margin-bottom: 15px;
}

.wd-card-footer {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.wd-price {
    font-weight: 700;
    color: #059669;
    font-size: 1.1rem;
}

.wd-btn-view {
    background: var(--color-hero-teal);
    color: white !important;
    padding: 8px 18px;
    border-radius: 99px;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    transition: all 0.2s;
}

.wd-btn-view:hover {
    background: #0F766E;
    /* Darker Teal */
    transform: translateX(3px);
}

/* =========================================
   WOOCOMMERCE CART & CHECKOUT
========================================= */

/* General Woo Notices */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    padding: 15px 20px;
    border-radius: 10px;
    margin-bottom: 30px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.woocommerce-message {
    background-color: #ECFDF5;
    color: #065F46;
    border-top: 3px solid #10B981;
}

.woocommerce-info {
    background-color: #EFF6FF;
    color: #1E40AF;
    border-top: 3px solid #3B82F6;
}

.woocommerce-error {
    background-color: #FEF2F2;
    color: #991B1B;
    border-top: 3px solid #EF4444;
    list-style: none;
}

/* Cart Table */
table.shop_table {
    border-radius: 20px;
    border: 1px solid #F3F4F6;
    overflow: hidden;
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    margin-bottom: 40px;
}

table.shop_table th {
    background: #F9FAFB;
    padding: 15px;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.85rem;
    color: #4B5563;
}

table.shop_table td {
    padding: 20px 15px;
    border-top: 1px solid #F3F4F6;
    vertical-align: middle;
}

/* Cart Totals */
.cart_totals {
    background: #FFFFF0;
    /* Creamy */
    padding: 30px;
    border-radius: 25px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
}

.cart_totals h2 {
    font-size: 1.5rem;
    margin-bottom: 20px;
}

.wc-proceed-to-checkout .checkout-button {
    background-color: var(--color-cta-coral) !important;
    padding: 15px 30px;
    border-radius: 99px;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 1.1rem;
    transition: all 0.2s;
}

.wc-proceed-to-checkout .checkout-button:hover {
    background-color: var(--color-cta-hover) !important;
    transform: translateY(-2px);
}

/* Checkout Forms */
.woocommerce-form-coupon {
    border: 2px dashed #D1D5DB;
    padding: 20px;
    border-radius: 15px;
    margin-bottom: 30px;
}

.woocommerce-checkout input[type='text'],
.woocommerce-checkout input[type='email'],
.woocommerce-checkout input[type='tel'],
.woocommerce-checkout textarea {
    padding: 12px 15px;
    border: 2px solid #E5E7EB;
    border-radius: 10px;
    width: 100%;
    transition: border 0.2s;
}

.woocommerce-checkout input:focus,
.woocommerce-checkout textarea:focus {
    border-color: var(--color-hero-teal);
    outline: none;
}

/* Checkout Review Order */
#order_review {
    background: white;
    padding: 30px;
    border-radius: 25px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    border: 1px solid #F3F4F6;
}

#payment {
    background: #F9FAFB !important;
    border-radius: 15px !important;
    padding: 20px !important;
}

#place_order {
    background-color: #1F2937 !important;
    width: 100%;
    padding: 18px;
    font-size: 1.2rem;
    border-radius: 99px;
}

.wd-product-details {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.wd-product-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 5px;
    line-height: 1.4;
}

.wd-product-title a {
    color: #1F2937;
    text-decoration: none;
    transition: color 0.2s;
}

.wd-product-title a:hover {
    color: var(--color-hero-teal);
}

.wd-product-cat {
    font-size: 0.85rem;
    color: #9CA3AF;
    margin-bottom: 15px;
}

.wd-card-footer {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.wd-price {
    font-weight: 700;
    color: #059669;
    font-size: 1.1rem;
}

.wd-btn-view {
    background: var(--color-hero-teal);
    color: white !important;
    padding: 8px 18px;
    border-radius: 99px;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    transition: all 0.2s;
}

.wd-btn-view:hover {
    background: #0F766E;
    /* Darker Teal */
    transform: translateX(3px);
}

/* =========================================
   WOOCOMMERCE CART & CHECKOUT
========================================= */

/* General Woo Notices */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    padding: 15px 20px;
    border-radius: 10px;
    margin-bottom: 30px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.woocommerce-message {
    background-color: #ECFDF5;
    color: #065F46;
    border-top: 3px solid #10B981;
}

.woocommerce-info {
    background-color: #EFF6FF;
    color: #1E40AF;
    border-top: 3px solid #3B82F6;
}

.woocommerce-error {
    background-color: #FEF2F2;
    color: #991B1B;
    border-top: 3px solid #EF4444;
    list-style: none;
}

/* Cart Table */
table.shop_table {
    border-radius: 20px;
    border: 1px solid #F3F4F6;
    overflow: hidden;
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    margin-bottom: 40px;
}

table.shop_table th {
    background: #F9FAFB;
    padding: 15px;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.85rem;
    color: #4B5563;
}

table.shop_table td {
    padding: 20px 15px;
    border-top: 1px solid #F3F4F6;
    vertical-align: middle;
}

/* Cart Totals */
.cart_totals {
    background: #FFFFF0;
    /* Creamy */
    padding: 30px;
    border-radius: 25px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
}

.cart_totals h2 {
    font-size: 1.5rem;
    margin-bottom: 20px;
}

.wc-proceed-to-checkout .checkout-button {
    background-color: var(--color-cta-coral) !important;
    padding: 15px 30px;
    border-radius: 99px;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 1.1rem;
    transition: all 0.2s;
}

.wc-proceed-to-checkout .checkout-button:hover {
    background-color: var(--color-cta-hover) !important;
    transform: translateY(-2px);
}

/* Checkout Forms */
.woocommerce-form-coupon {
    border: 2px dashed #D1D5DB;
    padding: 20px;
    border-radius: 15px;
    margin-bottom: 30px;
}

.woocommerce-checkout input[type='text'],
.woocommerce-checkout input[type='email'],
.woocommerce-checkout input[type='tel'],
.woocommerce-checkout textarea {
    padding: 12px 15px;
    border: 2px solid #E5E7EB;
    border-radius: 10px;
    width: 100%;
    transition: border 0.2s;
}

.woocommerce-checkout input:focus,
.woocommerce-checkout textarea:focus {
    border-color: var(--color-hero-teal);
    outline: none;
}

/* Checkout Review Order */
#order_review {
    background: white;
    padding: 30px;
    border-radius: 25px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    border: 1px solid #F3F4F6;
}

#payment {
    background: #F9FAFB !important;
    border-radius: 15px !important;
    padding: 20px !important;
}

#place_order {
    background-color: #1F2937 !important;
    width: 100%;
    padding: 18px;
    font-size: 1.2rem;
    border-radius: 99px;
    margin-top: 20px;
    font-weight: 800;
    transition: all 0.2s;
}

#place_order:hover {
    background-color: black !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

/* =========================================
   HOMEPAGE SPECIFIC FIXES (Resources Grid)
========================================= */
.home .resources-section .woocommerce ul.products {
    display: grid;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 30px !important;
    margin-top: 40px;
}

.home .resources-section .woocommerce ul.products li.product {
    background: white;
    border: 1px solid #f0f0f0;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
    padding: 0 !important;
    overflow: hidden;
    width: 100% !important;
    margin: 0 !important;
}

/* Reset Image Height for Homepage Cards */
.home .resources-section .woocommerce ul.products li.product a img {
    height: 250px !important;
    object-fit: cover;
}

/* Content Padding */
.home .resources-section .woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 1.2rem !important;
    margin: 15px 20px 5px !important;
}

.home .resources-section .woocommerce ul.products li.product .price {
    font-size: 1.2rem !important;
    margin: 0 20px 20px !important;
}

/* Button Fix */
.home .resources-section .woocommerce ul.products li.product .button {
    background: black !important;
    /* Premium Black */
    color: white !important;
    border-radius: 10px !important;
    margin: 0 20px 20px !important;
    width: calc(100% - 40px) !important;
    padding: 12px 0 !important;
    text-align: center;
    display: block;
    box-shadow: none !important;
}

.home .resources-section .woocommerce ul.products li.product .button:hover {
    background: #333 !important;
    transform: translateY(-2px);
}

/* Responsive Homepage Grid */
@media (max-width: 900px) {
    .home .resources-section .woocommerce ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 600px) {
    .home .resources-section .woocommerce ul.products {
        grid-template-columns: 1fr !important;
    }
}


/* =========================================
   NUCLEAR FIX FOR HOMEPAGE GRID WIDTHS
   (Overrides legacy wrapper constraints)
========================================= */
.home .resources-section .woocommerce ul.products li.product,
.home .resources-section .woocommerce ul.products li.product .wd-product-card,
.home .resources-section .woocommerce ul.products li.product .product-card-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex-basis: auto !important;
    box-sizing: border-box !important;
}

.home .resources-section .woocommerce ul.products {
    grid-template-columns: repeat(3, 1fr) !important;
    border: 1px solid #F3F4F6;
    overflow: hidden;
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    margin-bottom: 40px;
}

table.shop_table th {
    background: #F9FAFB;
    padding: 15px;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.85rem;
    color: #4B5563;
}

table.shop_table td {
    padding: 20px 15px;
    border-top: 1px solid #F3F4F6;
    vertical-align: middle;
}

/* Cart Totals */
.cart_totals {
    background: #FFFFF0;
    /* Creamy */
    padding: 30px;
    border-radius: 25px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
}

.cart_totals h2 {
    font-size: 1.5rem;
    margin-bottom: 20px;
}

.wc-proceed-to-checkout .checkout-button {
    background-color: var(--color-cta-coral) !important;
    padding: 15px 30px;
    border-radius: 99px;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 1.1rem;
    transition: all 0.2s;
}

.wc-proceed-to-checkout .checkout-button:hover {
    background-color: var(--color-cta-hover) !important;
    transform: translateY(-2px);
}

/* Checkout Forms */
.woocommerce-form-coupon {
    border: 2px dashed #D1D5DB;
    padding: 20px;
    border-radius: 15px;
    margin-bottom: 30px;
}

.woocommerce-checkout input[type='text'],
.woocommerce-checkout input[type='email'],
.woocommerce-checkout input[type='tel'],
.woocommerce-checkout textarea {
    padding: 12px 15px;
    border: 2px solid #E5E7EB;
    border-radius: 10px;
    width: 100%;
    transition: border 0.2s;
}

.woocommerce-checkout input:focus,
.woocommerce-checkout textarea:focus {
    border-color: var(--color-hero-teal);
    outline: none;
}

/* Checkout Review Order */
#order_review {
    background: white;
    padding: 30px;
    border-radius: 25px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    border: 1px solid #F3F4F6;
}

#payment {
    background: #F9FAFB !important;
    border-radius: 15px !important;
    padding: 20px !important;
}

#place_order {
    background-color: #1F2937 !important;
    width: 100%;
    padding: 18px;
    font-size: 1.2rem;
    border-radius: 99px;
    margin-top: 20px;
    font-weight: 800;
    transition: all 0.2s;
}

#place_order:hover {
    background-color: black !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

/* =========================================
   HOMEPAGE SPECIFIC FIXES (Resources Grid)
========================================= */
.home .resources-section .woocommerce ul.products {
    display: grid;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 30px !important;
    margin-top: 40px;
}

.home .resources-section .woocommerce ul.products li.product {
    background: white;
    border: 1px solid #f0f0f0;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
    padding: 0 !important;
    overflow: hidden;
    width: 100% !important;
    margin: 0 !important;
}

/* Reset Image Height for Homepage Cards */
.home .resources-section .woocommerce ul.products li.product a img {
    height: 250px !important;
    object-fit: cover;
}

/* Content Padding */
.home .resources-section .woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 1.2rem !important;
    margin: 15px 20px 5px !important;
}

.home .resources-section .woocommerce ul.products li.product .price {
    font-size: 1.2rem !important;
    margin: 0 20px 20px !important;
}

/* Button Fix */
.home .resources-section .woocommerce ul.products li.product .button {
    background: black !important;
    /* Premium Black */
    color: white !important;
    border-radius: 10px !important;
    margin: 0 20px 20px !important;
    width: calc(100% - 40px) !important;
    padding: 12px 0 !important;
    text-align: center;
    display: block;
    box-shadow: none !important;
}

.home .resources-section .woocommerce ul.products li.product .button:hover {
    background: #333 !important;
    transform: translateY(-2px);
}

/* Responsive Homepage Grid */
@media (max-width: 900px) {
    .home .resources-section .woocommerce ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 600px) {
    .home .resources-section .woocommerce ul.products {
        grid-template-columns: 1fr !important;
    }
}


/* =========================================
   NUCLEAR FIX FOR HOMEPAGE GRID WIDTHS
   (Overrides legacy wrapper constraints)
========================================= */
.home .resources-section .woocommerce ul.products li.product,
.home .resources-section .woocommerce ul.products li.product .wd-product-card,
.home .resources-section .woocommerce ul.products li.product .product-card-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex-basis: auto !important;
    box-sizing: border-box !important;
}

.home .resources-section .woocommerce ul.products {
    grid-template-columns: repeat(3, 1fr) !important;
    display: grid !important;
    width: 100% !important;
}

/* =========================================
   SINGLE PRODUCT PAGE REDESIGN (v3.0)
========================================= */

/* 1. Layout Grid */
.product-grid-layout {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    /* 60/40 approx */
    gap: 60px;
    align-items: start;
    margin-bottom: 80px;
}

/* 2. Gallery Styles */
.gallery-wrapper {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.main-image-stage img {
    width: 100%;
    height: auto;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
    /* Premium soft shadow */
    border: 1px solid rgba(0, 0, 0, 0.03);
    cursor: zoom-in;
    /* Hint at lightbox if we had one */
    transition: opacity 0.3s;
}

.gallery-thumbnails {
    display: flex;
    gap: 15px;
    overflow-x: auto;
    padding-bottom: 5px;
    /* Scrollbar space */
}

.thumb-item {
    width: 100px;
    height: 100px;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    opacity: 0.7;
    transition: all 0.2s;
    flex-shrink: 0;
}

.thumb-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.thumb-item:hover,
.thumb-item.active {
    border-color: var(--color-hero-teal);
    opacity: 1;
    transform: translateY(-2px);
}

/* 3. Buy Box (Right Column) */
.buy-box-card {
    background: white;
    padding: 40px;
    border-radius: 25px;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.08);
    /* Deep elegant shadow */
    border: 1px solid #f0f0f0;
    position: sticky;
    top: 100px;
    /* Sticks below header */
}

.wd-breadcrumbs {
    font-size: 0.85rem;
    color: #888;
    margin-bottom: 15px;
    text-transform: uppercase;
    font-weight: 600;
}

.wd-breadcrumbs a {
    color: #888;
    text-decoration: none;
}

.wd-product-title-lrg {
    font-size: 2.5rem;
    line-height: 1.1;
    margin-bottom: 15px;
    color: var(--color-text-main);
}

.wd-product-price-lrg {
    font-size: 2rem;
    font-weight: 700;
    color: #10B981;
    /* Fresh Green */
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.wd-short-desc ul {
    padding-left: 20px;
    margin-bottom: 30px;
    color: #555;
}

.wd-short-desc li {
    margin-bottom: 8px;
}

/* Add to Cart Area Override */
.wd-add-to-cart-area .quantity {
    display: inline-block;
    margin-right: 15px;
}

.wd-add-to-cart-area .button {
    width: 100%;
    margin-top: 15px;
    justify-content: center;
}

/* Trust Badges */
.wd-trust-badges {
    margin-top: 30px;
    padding-top: 25px;
    border-top: 1px solid #eee;
}

.badge-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 15px;
}

.icons-row {
    display: flex;
    gap: 20px;
    color: #999;
    font-size: 24px;
}

/* 4. Mobile Responsiveness */
@media (max-width: 900px) {
    .product-grid-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .buy-box-card {
        padding: 25px;
        position: static;
        /* Unstick on mobile */
    }

    .wd-product-title-lrg {
        font-size: 2rem;
    }
}

/* 5. Mobile Sticky Bar */
.mobile-sticky-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: white;
    padding: 15px 20px;
    box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    display: none;
    /* Hidden by default */
    align-items: center;
    justify-content: space-between;
    animation: slideUp 0.3s ease;
}

@media (max-width: 768px) {
    .mobile-sticky-bar.visible {
        display: flex;
    }
}

@keyframes slideUp {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}

.sticky-price {
    font-weight: 800;
    font-size: 1.2rem;
    color: #10B981;
}

.sticky-btn {
    background: black;
    color: white;
    padding: 10px 25px;
    border-radius: 99px;
    text-decoration: none;
    font-weight: 700;
}

/* =========================================
   HIGH CONVERSION POLISH (Final)
========================================= */

/* 1. Simplify Buy Box Spacing */
.woocommerce div.product form.cart {
    margin-top: 20px !important;
    /* Move closer to price */
    padding: 20px !important;
    background: white !important;
    /* Clean white */
    border: 1px solid #eee;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02);
}

/* 2. Fix Add to Cart Button Text */
.woocommerce div.product form.cart .button {
    white-space: nowrap !important;
    flex-direction: row !important;
    /* No stacking */
    padding: 18px 20px !important;
    margin-bottom: 0 !important;
    font-size: 1rem !important;
    gap: 8px !important;
}

/* 3. Subtler Trust Badges */
.trust-icons.trust-badges-row {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #f5f5f5;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.trust-item {
    font-size: 0.8rem;
    color: #666;
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
}

.trust-item span.dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
    color: #10B981;
    /* Green lock is good */
}

/* 4. Quantity Input Polish */
.woocommerce .quantity .qty {
    width: 60px !important;
    border: 1px solid #ddd !important;
    background: #f9f9f9;
}

/* 5. PayPal Button Spacing */
.woocommerce div.product form.cart .paypal-button {
    margin-top: 10px !important;
}

/* =========================================
   BLOG PREMIUM AESTHETICS (Responsive)
========================================= */

/* Container Logic */
.blog-grid-container {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 40px !important;
    width: 100% !important;
    margin-top: 40px !important;
}

/* Tablet (Responsive) */
@media (max-width: 1024px) {
    .blog-grid-container {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 30px !important;
    }
}

/* Mobile (Responsive) */
@media (max-width: 768px) {
    .blog-grid-container {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
    }

    /* Adjust Header for Mobile */
    .page-header {
        padding: 0 20px;
    }

    .page-title {
        font-size: 2.2rem !important;
    }
}

/* Card Polishing */
.blog-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.04);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.03);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    top: 0;
}

.blog-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
    border-color: rgba(0, 0, 0, 0.0);
}

/* Image Area */
.blog-card-image {
    position: relative;
    padding-top: 60%;
    /* 16:9 Aspect Ratio */
    overflow: hidden;
    width: 100%;
}

.blog-card-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.blog-card:hover .blog-card-image img {
    transform: scale(1.1);
}

/* Category Label */
.post-category-label {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    padding: 6px 14px;
    border-radius: 99px;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #1F2937;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    z-index: 2;
}

/* Content Area */
.blog-card-content {
    padding: 30px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.entry-header .entry-title {
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1.3;
    margin-bottom: 12px;
}

.entry-header .entry-title a {
    color: #111;
    text-decoration: none;
    transition: color 0.2s ease;
}

.blog-card:hover .entry-title a {
    color: var(--color-hero-teal);
}

.entry-meta {
    font-size: 0.85rem;
    color: #9CA3AF;
    margin-bottom: 15px;
    font-weight: 500;
}

.entry-content {
    color: #4B5563;
    font-size: 0.95rem;
    line-height: 1.7;
    margin-bottom: 25px;
    flex-grow: 1;
}

/* Read More Button */
.read-more-link {
    display: inline-flex;
    align-items: center;
    font-weight: 700;
    color: var(--color-hero-teal);
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 1px;
    text-decoration: none;
    transition: gap 0.3s ease;
    gap: 8px;
}

.read-more-link:hover {
    gap: 12px;
    color: #0d9488;
}

/* Pagination */
.pagination-wrapper .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid #eee;
    margin: 0 6px;
    color: #444;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.pagination-wrapper .page-numbers.current,
.pagination-wrapper .page-numbers:hover {
    background: var(--color-hero-teal);
    color: white;
    border-color: var(--color-hero-teal);
    box-shadow: 0 5px 15px rgba(27, 226, 159, 0.3);
}



/* =========================================
   PREMIUM FOOTER REDESIGN
========================================= */
.site-footer {
    background-color: #111827 !important;
    /* Extremely dark charcoal, almost black */
    color: #9CA3AF !important;
    /* Soft gray text */
    padding: 80px 0 40px !important;
    font-family: 'Inter', sans-serif;
}

.footer-heading {
    color: #fff !important;
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    margin-bottom: 25px;
    text-transform: uppercase;
}

.footer-links a {
    color: #9CA3AF !important;
    text-decoration: none;
    line-height: 2.2;
    transition: all 0.2s ease;
    display: inline-block;
}

.footer-links a:hover {
    color: var(--color-hero-teal) !important;
    transform: translateX(5px);
}

.footer-brand .footer-logo-text {
    color: #fff !important;
    font-size: 1.8rem;
    margin-bottom: 20px;
}

.footer-brand .brand-desc {
    color: #6B7280;
    line-height: 1.6;
    margin-bottom: 25px;
    max-width: 300px;
}

.contact-email a {
    color: #fff !important;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: var(--color-hero-teal);
    text-underline-offset: 4px;
}

/* Social Icons */
.social-links a {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff !important;
    background: rgba(255, 255, 255, 0.05);
    padding: 10px 15px;
    border-radius: 8px;
    margin-bottom: 10px;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.social-links a:hover {
    background: var(--color-hero-teal);
    border-color: var(--color-hero-teal);
    transform: translateY(-2px);
}

/* Copyright Bar */
.site-info {
    margin-top: 60px;
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.copyright-text,
.made-in {
    color: #4B5563 !important;
    font-size: 0.9rem;
}



/* =========================================
   MINIMALIST HERO-FIT FOOTER (Final)
========================================= */
.site-footer {
    background-color: #FFFFFF !important;
    color: #0F172A !important;
    padding: 80px 0 40px !important;
    border-top: 1px solid #F0F0F0;
    font-family: 'Inter', sans-serif;
}

/* Top Section Clean Logic */
.footer-heading {
    color: #0F172A !important;
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 1px;
    margin-bottom: 30px;
    text-transform: uppercase;
    opacity: 0.9;
}

.footer-links a {
    color: #64748B !important;
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 2.4;
    transition: all 0.2s ease;
}

.footer-links a:hover {
    color: var(--color-hero-teal) !important;
    padding-left: 5px;
}

/* Footer Brand: Big & Clean */
.footer-brand .footer-logo-text {
    color: var(--color-hero-teal) !important;
    font-size: 2rem;
    font-weight: 900;
    letter-spacing: -1px;
    margin-bottom: 20px;
}

.footer-brand .brand-desc {
    color: #64748B;
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 25px;
    max-width: 320px;
}

.contact-email a {
    color: #0F172A !important;
    font-weight: 700;
    font-size: 1.1rem;
    text-decoration: none;
    border-bottom: 2px solid #8FD8CC;
}

/* Social Icons: Minimalist Circles */
.social-links {
    display: flex;
    gap: 12px;
    flex-direction: row;
    flex-wrap: wrap;
}

.social-links a {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F8FAFC !important;
    color: #64748B !important;
    border: 1px solid #E2E8F0 !important;
    font-size: 0;
    /* Hide text, show icon only if desired, or keep text next to it. Previous HTML structure might dictate this. */
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    padding: 0;
}

.social-links a span.dashicons {
    font-size: 20px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.social-links a:hover {
    background: var(--color-hero-teal) !important;
    color: white !important;
    border-color: var(--color-hero-teal) !important;
    transform: translateY(-4px);
    box-shadow: 0 10px 20px rgba(20, 184, 166, 0.2);
}

/* Copyright Bar: Ultra Light */
.site-info {
    margin-top: 80px;
    padding-top: 30px;
    border-top: 1px solid #F1F5F9;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.copyright-text {
    color: #94A3B8 !important;
    font-size: 0.85rem;
    font-weight: 500;
}

.made-in {
    color: #94A3B8 !important;
    font-size: 0.85rem;
    font-weight: 500;
}

@media (max-width: 768px) {
    .site-footer {
        text-align: center;
    }

    .social-links {
        justify-content: center;
    }

    .footer-brand .brand-desc {
        margin: 0 auto 25px;
    }

    .footer-brand {
        margin-bottom: 40px;
    }
}



/* =========================================
   PREMIUM GLASS PILL HEADER (Final Modern)
========================================= */

.site-header {
    padding: 30px 0;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.site-header.fixed {
    padding: 10px 0;
}

.header-container {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.04);
    border-radius: 999px;
    padding: 8px 16px;
    max-width: 1050px;
    /* Larger initial width */
    width: 95%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    height: 74px;
    /* Larger initial height */
}

/* Shrink State: Tighter & Floating */
.site-header.fixed .header-container {
    height: 54px;
    max-width: 900px;
    /* Shrinks significantly in width */
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}

/* Logo Badge: Modern */
.logo-badge {
    width: 50px;
    height: 50px;
    background: var(--color-hero-teal);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 5px 15px rgba(20, 184, 166, 0.3);
    position: relative;
    left: 0;
    top: 0;
    transform: none;
}

.site-header.fixed .logo-badge {
    width: 36px;
    height: 36px;
}

/* Navigation Links */
.main-navigation {
    padding: 0;
    flex-grow: 1;
    display: flex;
    justify-content: center;
}

.main-navigation ul {
    background: transparent;
    padding: 0;
    gap: 2px;
}

.main-navigation ul li a {
    font-size: 0.9rem;
    font-weight: 600;
    color: #475569;
    padding: 8px 18px;
    border-radius: 99px;
    transition: all 0.3s ease;
}

.main-navigation ul li a:hover {
    color: var(--color-hero-teal);
    background: rgba(255, 255, 255, 0.8);
}

.main-navigation ul li.current-menu-item a {
    background: white;
    color: var(--color-hero-teal);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}

/* CTA Button: Sleek */
.btn-bundle {
    padding: 10px 24px;
    font-size: 0.9rem;
    background: #0F172A;
    color: white !important;
    box-shadow: none;
    transition: all 0.3s;
}

.btn-bundle:hover {
    transform: translateY(-2px);
    background: var(--color-hero-teal);
    box-shadow: 0 5px 15px rgba(20, 184, 166, 0.3);
}

.site-header.fixed .btn-bundle {
    padding: 8px 20px;
    font-size: 0.85rem;
}

/* Responsive Mobile */
@media (max-width: 900px) {
    .site-header {
        padding: 15px 0;
    }

    .header-container {
        justify-content: space-between;
        padding: 5px 8px;
        height: 60px;
        max-width: 95%;
    }

    .main-navigation {
        display: block;
        position: fixed;
        top: 0;
        right: 0;
        width: 80%;
        max-width: 320px;
        height: 100vh;
        background: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(30px);
        -webkit-backdrop-filter: blur(30px);
        box-shadow: -10px 0 30px rgba(0, 0, 0, 0.1);
        z-index: 1000;
        padding: 100px 30px 40px;
        transform: translateX(110%);
        transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1);
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }

    .main-navigation.toggled {
        transform: translateX(0);
    }

    .main-navigation ul {
        flex-direction: column;
        gap: 20px;
        width: 100%;
        background: transparent;
        padding: 0;
    }

    .main-navigation ul li {
        width: 100%;
        opacity: 0;
        transform: translateX(20px);
        transition: all 0.3s ease;
    }

    .main-navigation.toggled ul li {
        opacity: 1;
        transform: translateX(0);
    }

    /* Staggered Delay for Menu Items */
    .main-navigation.toggled ul li:nth-child(1) {
        transition-delay: 0.1s;
    }

    .main-navigation.toggled ul li:nth-child(2) {
        transition-delay: 0.2s;
    }

    .main-navigation.toggled ul li:nth-child(3) {
        transition-delay: 0.3s;
    }

    .main-navigation.toggled ul li:nth-child(4) {
        transition-delay: 0.4s;
    }

    .main-navigation.toggled ul li:nth-child(5) {
        transition-delay: 0.5s;
    }

    .main-navigation ul li a {
        font-size: 1.5rem;
        display: block;
        padding: 15px 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        color: #0F172A;
        font-weight: 500;
    }

    /* Overlay when menu is open */
    body.menu-open::after {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(15, 23, 42, 0.2);
        backdrop-filter: blur(4px);
        z-index: 999;
        opacity: 0;
        visibility: hidden;
        transition: all 0.4s ease;
    }

    body.menu-open::after {
        opacity: 1;
        visibility: visible;
    }

    /* Prevent scrolling when menu is open */
    body.menu-open {
        overflow: hidden;
    }

    /* Hide Desktop Nav */

    .menu-toggle {
        display: block;
        background: #F1F5F9;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #0F172A;
        transition: all 0.2s;
        /* Ensure it sits above the drawer */
        position: relative;
        z-index: 1001;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #0F172A;
        transition: all 0.2s;
    }

    .menu-toggle:active {
        transform: scale(0.95);
    }

    .btn-bundle.desk-cta {
        display: none;
    }
}

/* =========================================
   PORTFOLIO STYLES (Modern Studio Look)
   ========================================= */

/* --- Archive: Filter Bar --- */
.portfolio-filters {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 60px;
}

.filter-btn {
    background: transparent;
    border: 1px solid #E2E8F0;
    color: #64748B;
    padding: 10px 24px;
    border-radius: 99px;
    font-weight: 500;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.filter-btn:hover {
    border-color: var(--color-hero-teal);
    color: var(--color-hero-teal);
    transform: translateY(-2px);
}

.filter-btn.active {
    background: var(--color-hero-teal);
    border-color: var(--color-hero-teal);
    color: white;
    box-shadow: 0 5px 15px rgba(20, 184, 166, 0.3);
}

/* --- Archive: Grid & Cards/* Grid */
.wd-project-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    /* Reduced from 32/40 */
}

/* New Header Helper */
.wd-portfolio-header {
    margin-bottom: 24px;
    margin-top: 40px;
}

.wd-portfolio-header h3 {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    margin: 0;
}

/* Pagination */
.wd-pagination {
    margin-top: 40px;
    text-align: center;
}

.portfolio-item {
    /* Used for filtering logic visibility */
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.portfolio-card {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    background: white;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    height: 100%;
}

.portfolio-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.portfolio-thumb {
    display: block;
    height: 320px;
    /* Taller, more cinematic */
    overflow: hidden;
    position: relative;
}

.portfolio-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.portfolio-card:hover .portfolio-thumb img {
    transform: scale(1.08);
}

/* Overlay Content (Clean & Minimal) */
.portfolio-content {
    padding: 25px;
}

.portfolio-content h3 {
    margin: 0 0 8px;
    font-size: 1.35rem;
    font-weight: 700;
    color: #0F172A;
}

.portfolio-content h3 a {
    text-decoration: none;
    color: inherit;
    transition: color 0.2s;
}

.portfolio-content h3 a:hover {
    color: var(--color-hero-teal);
}

.portfolio-meta {
    font-size: 0.85rem;
    color: #94A3B8;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}

/* --- Single Project: Hero --- */
.project-header {
    background: linear-gradient(to bottom, #F8FAFC, #FFFFFF);
    border-bottom: 1px solid #F1F5F9;
}

.project-meta {
    display: inline-block;
    background: #DCFCE7;
    color: #166534;
    padding: 6px 16px;
    border-radius: 99px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 20px;
}

.project-title {
    font-size: 3.5rem;
    font-weight: 800;
    color: #0F172A;
    line-height: 1.1;
    margin-bottom: 20px;
    letter-spacing: -1px;
}

.project-client {
    font-size: 1.1rem;
    color: #64748B;
}

/* --- Single Project: Content --- */
.project-hero-image {
    width: 100%;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1);
    margin-top: -60px;
    margin-bottom: 80px;
}

.project-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 80px;
    align-items: start;
}

.project-body {
    font-size: 1.15rem;
    line-height: 1.8;
    color: #334155;
}

.project-body p {
    margin-bottom: 25px;
}

.project-body h2 {
    font-size: 2rem;
    color: #0F172A;
    margin-top: 50px;
    margin-bottom: 25px;
    font-weight: 700;
}

.project-body img {
    border-radius: 16px;
    max-width: 100%;
    height: auto;
    margin: 30px 0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

/* --- Single Project: Sidebar --- */
.project-sidebar {
    position: relative;
}

.sticky-sidebar {
    position: sticky;
    top: 120px;
    background: #F8FAFC;
    padding: 40px;
    border-radius: 24px;
    border: 1px solid #E2E8F0;
}

.sticky-sidebar h4 {
    font-size: 1.25rem;
    color: #0F172A;
    margin-bottom: 25px;
    border-bottom: 2px solid #E2E8F0;
    padding-bottom: 15px;
}

.project-details-list li {
    margin-bottom: 20px;
}

.project-details-list strong {
    display: block;
    color: #0F172A;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 5px;
}

.project-details-list span {
    color: #64748B;
    font-size: 1rem;
}

/* --- Single Project: Navigation --- */
.project-navigation {
    border-top: 1px solid #F1F5F9;
    padding: 60px 0;
    margin-top: 80px;
}

.nav-links {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-links a {
    text-decoration: none;
    font-weight: 700;
    color: #0F172A;
    font-size: 1.1rem;
    transition: color 0.2s;
    display: flex;
    align-items: center;
    gap: 10px;
}

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

.back-to-grid {
    padding: 10px 20px;
    background: #F1F5F9;
    border-radius: 99px;
    font-size: 0.9rem;
    color: #64748B;
    transition: all 0.2s;
}

.back-to-grid:hover {
    background: #E2E8F0;
    color: #0F172A;
}

/* --- Responsive --- */
@media (max-width: 900px) {
    .portfolio-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .project-layout {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .project-hero-image {
        margin-top: 20px;
    }

    .sticky-sidebar {
        position: static;
    }
}

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

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


/* =========================================
   SINGLE PRODUCT OPTIMIZATION (High Converting)
   ========================================= */

/* --- Layout --- */
.wd-product-hero-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 60px;
    margin-bottom: 80px;
    align-items: start;
}

/* --- Buy Box Sticky Card --- */
.buy-box-card {
    background: #ffffff;
    padding: 40px;
    border-radius: 24px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.02);
    position: sticky;
    top: 110px;
    /* Sticky behavior under header */
    transition: box-shadow 0.3s ease;
}

.buy-box-card:hover {
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.08);
}

/* --- Typography --- */
.wd-product-title-lrg {
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 15px;
    color: #1e293b;
    letter-spacing: -1px;
}

.wd-product-price-lrg {
    font-size: 2.2rem;
    color: var(--color-hero-teal);
    font-weight: 700;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.wd-product-price-lrg del {
    color: #94a3b8;
    font-size: 1.2rem;
    font-weight: 500;
}

.wd-short-desc {
    color: #475569;
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 30px;
}

/* --- Conversion Elements --- */
.wd-add-to-cart-area {
    margin-bottom: 30px;
}

/* FORCE STYLE on WooCommerce Button */
.single_add_to_cart_button {
    width: 100%;
    background-color: var(--color-hero-teal) !important;
    color: white !important;
    font-size: 1.2rem !important;
    font-weight: 700 !important;
    padding: 20px 30px !important;
    border-radius: 16px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 15px 30px rgba(20, 184, 166, 0.3);
    text-transform: uppercase;
    letter-spacing: 1px;
    border: none !important;
    cursor: pointer;
    display: block;
    text-align: center;
}

.single_add_to_cart_button:hover {
    transform: translateY(-4px);
    box-shadow: 0 25px 50px rgba(20, 184, 166, 0.4);
    background-color: #14b8a6 !important;
    /* Slightly darker teal */
}

/* --- Trust Badges --- */
.wd-trust-badges {
    margin-top: 30px;
    padding-top: 25px;
    border-top: 1px solid #f1f5f9;
}

.badge-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
    background: #f0fdfa;
    color: #0f766e;
    padding: 10px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.9rem;
}

.icons-row {
    display: flex;
    justify-content: center;
    gap: 25px;
    color: #cbd5e1;
}

.icons-row .dashicons {
    font-size: 24px;
    width: 24px;
    height: 24px;
}

/* --- Gallery Styling --- */
.product-gallery-col {
    position: relative;
}

.main-image-stage img {
    width: 100%;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
}

.gallery-thumbnails {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-top: 20px;
}

.thumb-item {
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    opacity: 0.6;
    transition: all 0.2s;
    border: 2px solid transparent;
}

.thumb-item.active,
.thumb-item:hover {
    opacity: 1;
    border-color: var(--color-hero-teal);
    transform: translateY(-2px);
}

.thumb-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* --- Mobile Sticky Bar (Modern Glass Pill) --- */
.mobile-sticky-bar {
    position: fixed;
    bottom: -120px;
    left: 50%;
    transform: translateX(-50%);
    width: 92%;
    max-width: 600px;
    /* Tablet/Desktop safe */
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    padding: 8px 12px;
    border-radius: 99px;
    /* Pill Shape */
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: bottom 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    /* Bounce effect */
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.mobile-sticky-bar.visible {
    bottom: 20px;
    /* Floats above screen edge */
}

.sticky-product-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sticky-thumb {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: 1px solid #e2e8f0;
}

.sticky-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sticky-details {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.sticky-title {
    font-size: 0.8rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.1;
    color: #1e293b;
    max-width: 140px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sticky-price {
    font-size: 0.75rem;
    color: var(--color-hero-teal);
    font-weight: 600;
}

.mobile-sticky-bar .sticky-btn {
    background: #0f172a;
    /* Dark for contrast */
    color: white;
    padding: 8px 18px;
    border-radius: 99px;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.75rem;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.2);
    transition: transform 0.2s;
}

.wd-add-to-cart-area {
    margin-bottom: 30px;
}

/* FORCE STYLE on WooCommerce Button */
.single_add_to_cart_button {
    width: 100%;
    background-color: var(--color-hero-teal) !important;
    color: white !important;
    font-size: 1.2rem !important;
    font-weight: 700 !important;
    padding: 20px 30px !important;
    border-radius: 16px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 15px 30px rgba(20, 184, 166, 0.3);
    text-transform: uppercase;
    letter-spacing: 1px;
    border: none !important;
    cursor: pointer;
    display: block;
    text-align: center;
}

.single_add_to_cart_button:hover {
    transform: translateY(-4px);
    box-shadow: 0 25px 50px rgba(20, 184, 166, 0.4);
    background-color: #14b8a6 !important;
    /* Slightly darker teal */
}

/* --- Trust Badges --- */
.wd-trust-badges {
    margin-top: 30px;
    padding-top: 25px;
    border-top: 1px solid #f1f5f9;
}

.badge-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
    background: #f0fdfa;
    color: #0f766e;
    padding: 10px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.9rem;
}

.icons-row {
    display: flex;
    justify-content: center;
    gap: 25px;
    color: #cbd5e1;
}

.icons-row .dashicons {
    font-size: 24px;
    width: 24px;
    height: 24px;
}

/* --- Gallery Styling --- */
.product-gallery-col {
    position: relative;
}

.main-image-stage img {
    width: 100%;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
}

.gallery-thumbnails {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-top: 20px;
}

.thumb-item {
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    opacity: 0.6;
    transition: all 0.2s;
    border: 2px solid transparent;
}

.thumb-item.active,
.thumb-item:hover {
    opacity: 1;
    border-color: var(--color-hero-teal);
    transform: translateY(-2px);
}

.thumb-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* --- Mobile Sticky Bar (Modern Glass Pill) --- */
.mobile-sticky-bar {
    position: fixed;
    bottom: -120px;
    left: 50%;
    transform: translateX(-50%);
    width: 92%;
    max-width: 600px;
    /* Tablet/Desktop safe */
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    padding: 8px 12px;
    border-radius: 99px;
    /* Pill Shape */
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: bottom 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    /* Bounce effect */
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.mobile-sticky-bar.visible {
    bottom: 20px;
    /* Floats above screen edge */
}

.sticky-product-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sticky-thumb {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: 1px solid #e2e8f0;
}

.sticky-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sticky-details {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.sticky-title {
    font-size: 0.8rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.1;
    color: #1e293b;
    max-width: 140px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sticky-price {
    font-size: 0.75rem;
    color: var(--color-hero-teal);
    font-weight: 600;
}

.mobile-sticky-bar .sticky-btn {
    background: #0f172a;
    /* Dark for contrast */
    color: white;
    padding: 8px 18px;
    border-radius: 99px;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.75rem;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.2);
    transition: transform 0.2s;
}

.mobile-sticky-bar .sticky-btn:active {
    transform: scale(0.95);
}

/* Visible on all devices (Desktop & Mobile) */
/* --- Responsive Behavior --- */

/* Desktop: Limit width and raise slightly */
@media (min-width: 901px) {
    .wd-sticky-pill-bar {
        max-width: 480px;
        /* Optimal reading width */
        bottom: 30px;
    }
}

/* Mobile: Fullish width and tighter positioning */
@media (max-width: 900px) {
    .wd-product-hero-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .buy-box-card {
        padding: 25px;
        position: static;
    }

    .wd-product-title-lrg {
        font-size: 2rem;
    }

    /* Sticky Bar Specifics */
    .sticky-title {
        max-width: 140px;
    }

    .wd-sticky-pill-bar {
        width: 94%;
        bottom: -150px;
    }

    .wd-sticky-pill-bar.visible {
        bottom: 15px;
    }
}

/* =========================================
   FIX: Related Products - STANDARD CARDS
========================================= */

/* 1. Main Container */
.wd-related-section-full {
    display: block !important;
    width: 100% !important;
    max-width: 1200px !important;
    margin: 80px auto !important;
    padding: 0 24px !important;
    clear: both !important;
    float: none !important;
}

/* 2. Title */
.wd-related-section-full .related h2 {
    font-size: 18px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    margin-bottom: 24px !important;
    display: block !important;
    text-align: left !important;
    width: 100%;
}

/* 3. The Grid */
.wd-related-section-full .related ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    width: 100% !important;
    /* Reset legacy */
    float: none !important;
    height: auto !important;
}

.wd-related-section-full .related ul.products::before,
.wd-related-section-full .related ul.products::after {
    display: none !important;
}

/* 4. The Card (Standard) */
.wd-related-section-full .related ul.products li.product {
    display: flex !important;
    flex-direction: column !important;
    width: auto !important;
    /* Let grid control width */
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    background: transparent !important;
    border: none !important;
    position: relative !important;
    height: auto !important;
    writing-mode: horizontal-tb !important;
    /* FIX THIN STRIP */
    transform: none !important;
}

/* Image */
.wd-related-section-full .related ul.products li.product a img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1/1 !important;
    /* Square or 3:4 */
    object-fit: cover !important;
    border-radius: 8px !important;
    margin-bottom: 12px !important;
    display: block !important;
}

/* Title */
.wd-related-section-full .related ul.products li.product h2.woocommerce-loop-product__title {
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: #111827 !important;
    line-height: 1.4 !important;
    margin-bottom: 5px !important;
    padding: 0 !important;
}

/* Price */
.wd-related-section-full .related ul.products li.product .price {
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    color: #4B5563 !important;
    display: block !important;
}

/* Responsiveness */
@media (max-width: 1024px) {
    .wd-related-section-full .related ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 640px) {
    .wd-related-section-full .related ul.products {
        grid-template-columns: 1fr !important;
    }
}

/* =========================================
   5. COMPONENT REFINEMENT (PHASE 3)
   ========================================= */

/* 5.1 UNIFIED PRODUCT CARD (.wd-product-card) */
.wd-product-card {
    background: var(--color-bg-card);
    border-radius: var(--radius-md);
    overflow: hidden;
    position: relative;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    height: 100%;
    display: flex;
    flex-direction: column;
    border: 1px solid transparent;
    box-shadow: var(--shadow-sm);
}

.wd-product-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-xl);
    border-color: var(--color-border);
}

.wd-product-image {
    position: relative;
    padding-top: 100%;
    /* 1:1 Aspect Ratio */
    overflow: hidden;
    background-color: #f3f4f6;
    display: block;
}

.wd-product-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.wd-product-card:hover .wd-product-image img {
    transform: scale(1.05);
}

.wd-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: var(--color-brand-accent);
    color: white;
    font-size: 0.75rem;
    font-weight: var(--weight-bold);
    padding: 4px 10px;
    border-radius: var(--radius-full);
    z-index: 2;
    box-shadow: var(--shadow-sm);
}

.wd-product-details {
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.wd-product-title {
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    margin-bottom: var(--space-xs);
    line-height: 1.3;
}

.wd-product-title a {
    color: var(--color-text-main);
    text-decoration: none;
}

.wd-product-cat {
    font-size: var(--text-xs);
    color: var(--color-text-light);
    margin-bottom: var(--space-sm);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.wd-card-footer {
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--space-sm);
    border-top: 1px solid var(--color-border);
}

.wd-price {
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    color: var(--color-brand-primary);
}

.wd-price del {
    color: var(--color-text-light);
    font-size: 0.9em;
    font-weight: normal;
    margin-right: 6px;
}

.wd-btn-view {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text-main);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.wd-btn-view:hover {
    color: var(--color-brand-primary);
    text-decoration: underline;
}

/* =========================================
   10. FOOTER REFINEMENT
   ========================================= */
.site-footer {
    background-color: white;
    padding-top: var(--space-3xl);
    padding-bottom: var(--space-xl);
    border-top: 1px solid var(--color-border);
    margin-top: 0;
}

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

.footer-brand p {
    color: var(--color-text-secondary);
    font-size: 0.95rem;
    margin-bottom: 20px;
}

.footer-logo-text {
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--color-text-main);
    margin-bottom: 15px;
    display: inline-block;
}

.footer-heading {
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-text-light);
    /* Muted label */
    margin-bottom: 24px;
    font-weight: 700;
}

.footer-links a,
.social-links a {
    display: block;
    color: var(--color-text-secondary);
    margin-bottom: 12px;
    font-size: 1rem;
    transition: color 0.2s;
    text-decoration: none;
}

.footer-links a:hover,
.social-links a:hover {
    color: var(--color-brand-primary);
}

.copyright-bar {
    border-top: 1px solid var(--color-border);
    padding-top: 30px;
    display: flex;
    justify-content: space-between;
    color: var(--color-text-light);
    font-size: 0.875rem;
}

/* Footer Responsive */
@media (max-width: 900px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 48px;
    }

    .footer-brand {
        grid-column: 1 / -1;
    }
}

@media (max-width: 600px) {
    .footer-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
}



/* 5.3 SHOP HERO */
.wd-shop-hero {
    background-color: var(--color-brand-primary);
    padding: var(--space-3xl) var(--space-md);
    text-align: center;
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-3xl);
    color: white;
    margin-top: var(--space-xl);
    background-image: linear-gradient(135deg, var(--color-brand-primary) 0%, var(--color-brand-hover) 100%);
    box-shadow: var(--shadow-xl);
}

.wd-shop-hero .shop-title {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: var(--weight-black);
    margin-bottom: var(--space-sm);
    color: white;
    text-transform: uppercase;
    letter-spacing: -0.02em;
}

.wd-shop-hero .shop-subtitle {
    font-size: var(--text-lg);
    opacity: 0.95;
    max-width: 600px;
    margin: 0 auto;
    font-weight: var(--weight-medium);
}

/* =========================================
   CRITICAL OVERRIDES (Fix for layout issues)
   ========================================= */
/* Ensure Grid is Strong */
.woocommerce ul.products {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 32px !important;
    margin: 0 !important;
    width: 100% !important;
}

/* Ensure Cards are Full Width of Cell */
.woocommerce ul.products li.product {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    float: none !important;
    background: white;
    /* Aesthetic Refinements */
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    /* Fix jagged edges */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05) !important;
    border: 1px solid #f3f4f6 !important;
    transition: all 0.3s ease !important;
}

/* Lift on Hover */
.woocommerce ul.products li.product:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1) !important;
    border-color: #e5e7eb !important;
}

/* Image Spacing */
.woocommerce ul.products li.product a {
    flex-grow: 1;
    /* Push text down if needed */
}

.woocommerce ul.products li.product a img {
    margin: 0 !important;
    width: 100% !important;
    border-radius: 20px 20px 0 0 !important;
    /* Top round only */
    display: block !important;
    aspect-ratio: 1/1 !important;
    /* Square for consistency or 4/5 */
    object-fit: cover !important;
}

/* Content Padding */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    padding: 24px 28px 8px !important;
    /* Increased padding */
    text-align: left !important;
    font-size: 1.15rem !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    word-wrap: break-word !important;
}

.woocommerce ul.products li.product .price {
    padding: 0 28px 12px !important;
    /* Match Title Padding */
    text-align: left !important;
    display: block !important;
    margin-bottom: auto !important;
}

/* Button & Bottom Area */
.woocommerce ul.products li.product .button {
    margin: 16px 28px 28px !important;
    /* Match Title Padding */
    width: auto !important;
    display: inline-flex !important;
    justify-content: center !important;
    padding: 12px 24px !important;
    border-radius: 99px !important;
    text-transform: uppercase !important;
    font-size: 0.85rem !important;
    background: #111827 !important;
    color: white !important;
    box-shadow: none !important;
    align-self: flex-start !important;
    min-width: 120px;
}

.woocommerce ul.products li.product .button:hover {
    background: var(--color-brand-primary) !important;
    color: white !important;
    transform: none !important;
}

/* Fix Responsive overrides */
@media (max-width: 900px) {
    .woocommerce ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 600px) {
    .woocommerce ul.products {
        grid-template-columns: 1fr !important;
    }
}

/* =========================================
   SINGLE PRODUCT TABS FIX (Layout & Design)
   ========================================= */
/* 1. Structural Fix: Full Width Row Area */
.wd-tabs-section-full {
    width: 100%;
    margin-top: 80px;
    margin-bottom: 80px;
    clear: both;
    position: relative;
    background: transparent;
    /* or white if preferred */
}

/* 2. Container Constraint (Centered) */
.wd-container-narrow {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 0 24px;
}

/* 3. The Tabs Card (Premium Look) */
.woocommerce div.product .woocommerce-tabs {
    background: #ffffff;
    border-radius: 24px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.02);
    overflow: hidden;
    margin: 0 !important;
    /* Reset stray margins */
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* 4. Tab Navigation (Header) */
.woocommerce div.product .woocommerce-tabs ul.tabs {
    background: #f8fafc;
    /* Subtle grey header */
    border-bottom: 1px solid #e2e8f0;
    padding: 0 40px !important;
    margin: 0 !important;
    display: flex;
    gap: 40px;
    overflow-x: auto;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
    background: transparent !important;
    border: none !important;
    margin: 0 !important;
    padding: 24px 0 !important;
    position: relative;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
    display: none !important;
    /* Remove WC rounded corners crap */
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.1rem;
    color: #64748b;
    padding: 0 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: color 0.2s;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
    color: #0f172a;
    /* Dark text */
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active::after {
    content: '';
    position: absolute;
    bottom: 0px;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--color-hero-teal);
    display: block !important;
    border-radius: 3px 3px 0 0;
}

/* 5. Tab Content (Description/Reviews) */
.woocommerce div.product .woocommerce-tabs .panel {
    padding: 48px 40px !important;
    margin: 0 !important;
    background: white;
}

.woocommerce div.product .woocommerce-tabs .panel h2 {
    font-size: 1.75rem;
    font-weight: 800;
    margin-bottom: 24px;
    color: #1e293b;
    display: none;
    /* Often redundant title */
}

.woocommerce div.product .woocommerce-tabs .panel p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #475569;
    max-width: 800px;
}

/* Responsive Tabs */
@media (max-width: 768px) {
    .wd-container-narrow {
        padding: 0 20px;
    }

    .woocommerce div.product .woocommerce-tabs .panel {
        padding: 30px 20px !important;
    }

    .woocommerce div.product .woocommerce-tabs ul.tabs {
        flex-grow: 1;
        /* Push text down if needed */
    }

    .woocommerce ul.products li.product a img {
        margin: 0 !important;
        width: 100% !important;
        border-radius: 20px 20px 0 0 !important;
        /* Top round only */
        display: block !important;
        aspect-ratio: 1/1 !important;
        /* Square for consistency or 4/5 */
        object-fit: cover !important;
    }

    /* Content Padding */
    .woocommerce ul.products li.product .woocommerce-loop-product__title {
        padding: 24px 28px 8px !important;
        /* Increased padding */
        text-align: left !important;
        font-size: 1.15rem !important;
        line-height: 1.4 !important;
        margin: 0 !important;
        word-wrap: break-word !important;
    }

    .woocommerce ul.products li.product .price {
        padding: 0 28px 12px !important;
        /* Match Title Padding */
        text-align: left !important;
        display: block !important;
        margin-bottom: auto !important;
    }

    /* Button & Bottom Area */
    .woocommerce ul.products li.product .button {
        margin: 16px 28px 28px !important;
        /* Match Title Padding */
        width: auto !important;
        display: inline-flex !important;
        justify-content: center !important;
        padding: 12px 24px !important;
        border-radius: 99px !important;
        text-transform: uppercase !important;
        font-size: 0.85rem !important;
        background: #111827 !important;
        color: white !important;
        box-shadow: none !important;
        align-self: flex-start !important;
        min-width: 120px;
    }

    .woocommerce ul.products li.product .button:hover {
        background: var(--color-brand-primary) !important;
        color: white !important;
        transform: none !important;
    }

    /* Fix Responsive overrides */
    @media (max-width: 900px) {
        .woocommerce ul.products {
            grid-template-columns: repeat(2, 1fr) !important;
        }
    }

    @media (max-width: 600px) {
        .woocommerce ul.products {
            grid-template-columns: 1fr !important;
        }
    }

    /* =========================================
   SINGLE PRODUCT TABS FIX (Layout & Design)
   ========================================= */
    /* 1. Structural Fix: Full Width Row Area */
    .wd-tabs-section-full {
        width: 100%;
        margin-top: 80px;
        margin-bottom: 80px;
        clear: both;
        position: relative;
        background: transparent;
        /* or white if preferred */
    }

    /* 2. Container Constraint (Centered) */
    .wd-container-narrow {
        max-width: 1200px;
        width: 100%;
        margin: 0 auto;
        padding: 0 24px;
    }

    /* 3. The Tabs Card (Premium Look) */
    .woocommerce div.product .woocommerce-tabs {
        background: #ffffff;
        border-radius: 24px;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.06);
        border: 1px solid rgba(0, 0, 0, 0.02);
        overflow: hidden;
        margin: 0 !important;
        /* Reset stray margins */
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* 4. Tab Navigation (Header) */
    .woocommerce div.product .woocommerce-tabs ul.tabs {
        background: #f8fafc;
        /* Subtle grey header */
        border-bottom: 1px solid #e2e8f0;
        padding: 0 40px !important;
        margin: 0 !important;
        display: flex;
        gap: 40px;
        overflow-x: auto;
    }

    .woocommerce div.product .woocommerce-tabs ul.tabs li {
        background: transparent !important;
        border: none !important;
        margin: 0 !important;
        padding: 24px 0 !important;
        position: relative;
    }

    .woocommerce div.product .woocommerce-tabs ul.tabs li::before,
    .woocommerce div.product .woocommerce-tabs ul.tabs li::after {
        display: none !important;
        /* Remove WC rounded corners crap */
    }

    .woocommerce div.product .woocommerce-tabs ul.tabs li a {
        font-family: var(--font-heading);
        font-weight: 700;
        font-size: 1.1rem;
        color: #64748b;
        padding: 0 !important;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        transition: color 0.2s;
    }

    .woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
        color: #0f172a;
        /* Dark text */
    }

    .woocommerce div.product .woocommerce-tabs ul.tabs li.active::after {
        content: '';
        position: absolute;
        bottom: 0px;
        left: 0;
        width: 100%;
        height: 3px;
        background: var(--color-hero-teal);
        display: block !important;
        border-radius: 3px 3px 0 0;
    }

    /* 5. Tab Content (Description/Reviews) */
    .woocommerce div.product .woocommerce-tabs .panel {
        padding: 48px 40px !important;
        margin: 0 !important;
        background: white;
    }

    .woocommerce div.product .woocommerce-tabs .panel h2 {
        font-size: 1.75rem;
        font-weight: 800;
        margin-bottom: 24px;
        color: #1e293b;
        display: none;
        /* Often redundant title */
    }

    .woocommerce div.product .woocommerce-tabs .panel p {
        font-size: 1.1rem;
        line-height: 1.8;
        color: #475569;
        max-width: 800px;
    }

    /* Responsive Tabs */
    @media (max-width: 768px) {
        .wd-container-narrow {
            padding: 0 20px;
        }

        .woocommerce div.product .woocommerce-tabs .panel {
            padding: 30px 20px !important;
        }

        .woocommerce div.product .woocommerce-tabs ul.tabs {
            padding: 0 20px !important;
            gap: 25px;
        }
    }

    .woocommerce ul.products li.product a img {
        margin: 0 !important;
        width: 100% !important;
        border-radius: 20px 20px 0 0 !important;
        /* Top round only */
        display: block !important;
        aspect-ratio: 1/1 !important;
        /* Square for consistency or 4/5 */
        object-fit: cover !important;
    }

    /* Content Padding */
    .woocommerce ul.products li.product .woocommerce-loop-product__title {
        padding: 24px 28px 8px !important;
        /* Increased padding */
        text-align: left !important;
        font-size: 1.15rem !important;
        line-height: 1.4 !important;
        margin: 0 !important;
        word-wrap: break-word !important;
    }

    .woocommerce ul.products li.product .price {
        padding: 0 28px 12px !important;
        /* Match Title Padding */
        text-align: left !important;
        display: block !important;
        margin-bottom: auto !important;
    }

    /* Button & Bottom Area */
    .woocommerce ul.products li.product .button {
        margin: 16px 28px 28px !important;
        /* Match Title Padding */
        width: auto !important;
        display: inline-flex !important;
        justify-content: center !important;
        padding: 12px 24px !important;
        border-radius: 99px !important;
        text-transform: uppercase !important;
        font-size: 0.85rem !important;
        background: #111827 !important;
        color: white !important;
        box-shadow: none !important;
        align-self: flex-start !important;
        min-width: 120px;
    }

    .woocommerce ul.products li.product .button:hover {
        background: var(--color-brand-primary) !important;
        color: white !important;
        transform: none !important;
    }
}

/* Fix Responsive overrides */
@media (max-width: 900px) {
    .woocommerce ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 600px) {
    .woocommerce ul.products {
        grid-template-columns: 1fr !important;
    }
}

/* =========================================
   SINGLE PRODUCT TABS FIX (Layout & Design)
   ========================================= */
/* 1. Structural Fix: Full Width Row Area */
.wd-tabs-section-full {
    width: 100%;
    margin-top: 80px;
    margin-bottom: 80px;
    clear: both;
    position: relative;
    background: transparent;
    /* or white if preferred */
}

/* 2. Container Constraint (Centered) */
.wd-container-narrow {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 0 24px;
}

/* 3. The Tabs Card (Premium Look) */
.woocommerce div.product .woocommerce-tabs {
    background: #ffffff;
    border-radius: 24px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.02);
    overflow: hidden;
    margin: 0 !important;
    /* Reset stray margins */
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* 4. Tab Navigation (Header) */
.woocommerce div.product .woocommerce-tabs ul.tabs {
    background: #f8fafc;
    /* Subtle grey header */
    border-bottom: 1px solid #e2e8f0;
    padding: 0 40px !important;
    margin: 0 !important;
    display: flex;
    gap: 40px;
    overflow-x: auto;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
    background: transparent !important;
    border: none !important;
    margin: 0 !important;
    padding: 24px 0 !important;
    position: relative;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
    display: none !important;
    /* Remove WC rounded corners crap */
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.1rem;
    color: #64748b;
    padding: 0 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: color 0.2s;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
    color: #0f172a;
    /* Dark text */
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active::after {
    content: '';
    position: absolute;
    bottom: 0px;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--color-hero-teal);
    display: block !important;
    border-radius: 3px 3px 0 0;
}

/* 5. Tab Content (Description/Reviews) */
.woocommerce div.product .woocommerce-tabs .panel {
    padding: 48px 40px !important;
    margin: 0 !important;
    background: white;
}

.woocommerce div.product .woocommerce-tabs .panel h2 {
    font-size: 1.75rem;
    font-weight: 800;
    margin-bottom: 24px;
    color: #1e293b;
    display: none;
    /* Often redundant title */
}

.woocommerce div.product .woocommerce-tabs .panel p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #475569;
    max-width: 800px;
}

/* Responsive Tabs */
@media (max-width: 768px) {
    .wd-container-narrow {
        padding: 0 20px;
    }

    .woocommerce div.product .woocommerce-tabs .panel {
        padding: 30px 20px !important;
    }

    .woocommerce div.product .woocommerce-tabs ul.tabs {
        padding: 0 20px !important;
        gap: 25px;
    }
}



/* Content Padding */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    padding: 24px 28px 8px !important;
    /* Increased padding */
    text-align: left !important;
    font-size: 1.15rem !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    word-wrap: break-word !important;
}

.woocommerce ul.products li.product .price {
    padding: 0 28px 12px !important;
    /* Match Title Padding */
    text-align: left !important;
    display: block !important;
    margin-bottom: auto !important;
}

/* Button & Bottom Area */
.woocommerce ul.products li.product .button {
    margin: 16px 28px 28px !important;
    /* Match Title Padding */
    width: auto !important;
    display: inline-flex !important;
    justify-content: center !important;
    padding: 12px 24px !important;
    border-radius: 99px !important;
    text-transform: uppercase !important;
    font-size: 0.85rem !important;
    background: #111827 !important;
    color: white !important;
    box-shadow: none !important;
    align-self: flex-start !important;
    min-width: 120px;
}

.woocommerce ul.products li.product .button:hover {
    background: var(--color-brand-primary) !important;
    color: white !important;
    transform: none !important;
}


/* Fix Responsive overrides */
@media (max-width: 900px) {
    .woocommerce ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 600px) {
    .woocommerce ul.products {
        grid-template-columns: 1fr !important;
    }
}

/* =========================================
   SINGLE PRODUCT TABS FIX (Layout & Design)
   ========================================= */
/* 1. Structural Fix: Full Width Row Area */
.wd-tabs-section-full {
    width: 100%;
    margin-top: 80px;
    margin-bottom: 80px;
    clear: both;
    position: relative;
    background: transparent;
    /* or white if preferred */
}

/* 2. Container Constraint (Centered) */
.wd-container-narrow {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 0 24px;
}

/* 3. The Tabs Card (Premium Look) */
.woocommerce div.product .woocommerce-tabs {
    background: #ffffff;
    border-radius: 24px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.02);
    overflow: hidden;
    margin: 0 !important;
    /* Reset stray margins */
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* 4. Tab Navigation (Header) */
.woocommerce div.product .woocommerce-tabs ul.tabs {
    background: #f8fafc;
    /* Subtle grey header */
    border-bottom: 1px solid #e2e8f0;
    padding: 0 40px !important;
    margin: 0 !important;
    display: flex;
    gap: 40px;
    overflow-x: auto;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
    background: transparent !important;
    border: none !important;
    margin: 0 !important;
    padding: 24px 0 !important;
    position: relative;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
    display: none !important;
    /* Remove WC rounded corners crap */
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.1rem;
    color: #64748b;
    padding: 0 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: color 0.2s;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
    color: #0f172a;
    /* Dark text */
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active::after {
    content: '';
    position: absolute;
    bottom: 0px;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--color-hero-teal);
    display: block !important;
    border-radius: 3px 3px 0 0;
}

/* 5. Tab Content (Description/Reviews) */
.woocommerce div.product .woocommerce-tabs .panel {
    padding: 48px 40px !important;
    margin: 0 !important;
    background: white;
}

.woocommerce div.product .woocommerce-tabs .panel h2 {
    font-size: 1.75rem;
    font-weight: 800;
    margin-bottom: 24px;
    color: #1e293b;
    display: none;
    /* Often redundant title */
}

.woocommerce div.product .woocommerce-tabs .panel p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #475569;
    max-width: 800px;
}

/* Responsive Tabs */
@media (max-width: 768px) {
    .wd-container-narrow {
        padding: 0 20px;
    }

    .woocommerce div.product .woocommerce-tabs .panel {
        padding: 30px 20px !important;
    }

    .woocommerce div.product .woocommerce-tabs ul.tabs {
        padding: 0 20px !important;
    }
}


/* =========================================
   SINGLE PRODUCT LAYOUT V3 (Final Polish)
   ========================================= */

/* 1. Global Page Settings & Container */
body.single-product {
    background-color: #F9FAFB;
    /* Clean light grey */
}

/* Master Container - Controls Global Alignment */
/* Master Container - Controls Global Alignment */
.wd-single-product-container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding);
    display: flex;
    flex-direction: column;
    gap: var(--section-spacing);
}

/* Global Section Title */
.wd-section-title-card,
.wd-related-products-wrapper h2 {
    font-family: var(--font-heading);
    font-size: 1.75rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 32px;
    letter-spacing: -0.02em;
}

/* 2. Universal Card Styling */
.wd-section-card,
.wd-sticky-buy-box-card {
    background: #FFFFFF;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    border: 1px solid rgba(0, 0, 0, 0.03);
    padding: 32px;
    /* Standard Card Padding */
    width: 100%;
    margin-bottom: 0;
}

/* 3. Hero Grid (60/40 Split) */
.wd-product-hero-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    /* approx 58% - 42% */
    gap: 48px;
    align-items: start;
    margin-bottom: 0;
    /* Handled by container gap */
}

/* Gallery - Clean */
.wd-col-gallery {
    width: 100%;
}

.wd-main-image-stage img {
    border-radius: 20px;
    width: 100%;
    display: block;
    cursor: zoom-in;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
}

/* Buy Box - Refined */
.wd-col-buybox {
    width: 100%;
    position: sticky;
    top: 40px;
    z-index: 10;
}

.wd-sticky-buy-box-card {
    padding: 40px;
}

/* Buy Box Typography */
.wd-product-title-hero {
    font-size: 2.25rem;
    line-height: 1.1;
    margin-bottom: 12px;
    letter-spacing: -0.01em;
}

.wd-rating-hero {
    margin-bottom: 20px;
}

.wd-price-hero p.price {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-brand-primary);
    margin-bottom: 28px;
}

/* Checklist */
.wd-product-checklist-hero {
    background: #111827;
    color: #fff;
    height: 56px;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 16px;
    transition: transform 0.2s, box-shadow 0.2s;
}

.wd-add-to-cart-hero .single_add_to_cart_button:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

/* 4. "Why Choose" - Card Layout */
.wd-why-choose-card .wd-features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

.wd-feature-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

.feat-icon .dashicons {
    font-size: 32px;
    width: 56px;
    height: 56px;
    background: #ECFDF5;
    color: var(--color-brand-primary);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.feat-content h5 {
    font-size: 1.1rem;
    margin-bottom: 8px;
    color: #111827;
}

/* 5. Tabs - Polished Card */
.wd-tabs-card {
    padding: 0 !important;
    /* Reset padding to manual control */
    overflow: hidden;
}

.woocommerce-tabs ul.tabs {
    background: #F8FAFC;
    border-bottom: 1px solid #E2E8F0;
    padding: 0 48px !important;
    display: flex;
    gap: 40px;
}

.woocommerce-tabs ul.tabs li {
    padding: 24px 0 !important;
    border: none !important;
    background: transparent !important;
}

.woocommerce-tabs ul.tabs li a {
    color: #64748B;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.95rem;
    letter-spacing: 0.05em;
    padding: 0 !important;
}

.woocommerce-tabs ul.tabs li.active {
    border-bottom: 3px solid var(--color-brand-primary) !important;
    margin-bottom: -1px;
}

.woocommerce-tabs ul.tabs li.active a {
    color: #111827;
}

.woocommerce-tabs .panel {
    padding: 56px 48px !important;
    max-width: 800px;
    /* Readable line length */
    margin: 0 auto !important;
}

/* 6. FAQ Block - Accordion Style */
.wd-faq-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.wd-faq-item {
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    padding: 20px 24px;
    transition: all 0.2s;
}

.wd-faq-item[open] {
    background: #F9FAFB;
    border-color: #D1D5DB;
}

.wd-faq-item summary {
    font-weight: 600;
    font-size: 1.05rem;
    color: #111827;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Custom Arrow */
.wd-faq-item summary::after {
    content: '+';
    font-size: 1.5rem;
    font-weight: 400;
    color: #9CA3AF;
}

.wd-faq-item[open] summary::after {
    content: '-';
    color: var(--color-brand-primary);
}

.wd-faq-item .faq-content {
    margin-top: 16px;
    color: #4B5563;
    line-height: 1.6;
    font-size: 1rem;
}

/* 7. Related Products Grid */
.wd-related-products-wrapper ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    /* 4 cols on desktop */
    gap: 32px !important;
}

.wd-related-products-wrapper ul.products li.product {
    background: #fff;
    border-radius: 16px;
    border: 1px solid rgba(0, 0, 0, 0.04);
    overflow: hidden;
    transition: transform 0.2s;
}

.wd-related-products-wrapper ul.products li.product:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}

.wd-related-products-wrapper ul.products li.product img {
    height: 240px !important;
    object-fit: cover;
    width: 100%;
}

.wd-related-products-wrapper .woocommerce-loop-product__title {
    padding: 16px 20px 8px !important;
    font-size: 1rem !important;
}

.wd-related-products-wrapper .price {
    padding: 0 20px 16px !important;
}

/* 8. Responsiveness */
@media (max-width: 1024px) {
    .wd-product-hero-grid {
        grid-template-columns: 1fr;
        /* Stack Hero */
        gap: 40px;
    }

    .wd-col-buybox {
        position: static;
        max-width: 100%;
    }

    .wd-related-products-wrapper ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 768px) {
    .wd-single-product-container {
        padding: 24px 16px 64px;
        gap: 48px;
    }

    .wd-section-card,
    .wd-sticky-buy-box-card {
        padding: 24px;
    }

    .wd-why-choose-card .wd-features-grid {
        grid-template-columns: 1fr;
        /* Stack Features */
    }

    .wd-related-products-wrapper ul.products {
        grid-template-columns: 1fr !important;
    }
}

/* 9. Layout Defensive */
.woocommerce div.product {
    display: block !important;
}

/* 1. Structural Fix: Full Width Row Area */
.wd-tabs-section-full {
    width: 100%;
    margin-top: 80px;
    margin-bottom: 80px;
    clear: both;
    position: relative;
    background: transparent;
    /* or white if preferred */
}

/* 2. Container Constraint (Centered) */
.wd-container-narrow {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 0 24px;
}

/* 3. The Tabs Card (Premium Look) */
.woocommerce div.product .woocommerce-tabs {
    background: #ffffff;
    border-radius: 24px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.02);
    overflow: hidden;
    margin: 0 !important;
    /* Reset stray margins */
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* 4. Tab Navigation (Header) */
.woocommerce div.product .woocommerce-tabs ul.tabs {
    background: #f8fafc;
    /* Subtle grey header */
    border-bottom: 1px solid #e2e8f0;
    padding: 0 40px !important;
    margin: 0 !important;
    display: flex;
    gap: 40px;
    overflow-x: auto;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
    background: transparent !important;
    border: none !important;
    margin: 0 !important;
    padding: 24px 0 !important;
    position: relative;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
    display: none !important;
    /* Remove WC rounded corners crap */
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.1rem;
    color: #64748b;
    padding: 0 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: color 0.2s;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
    color: #0f172a;
    /* Dark text */
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active::after {
    content: '';
    position: absolute;
    bottom: 0px;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--color-hero-teal);
    display: block !important;
    border-radius: 3px 3px 0 0;
}

/* 5. Tab Content (Description/Reviews) */
.woocommerce div.product .woocommerce-tabs .panel {
    padding: 48px 40px !important;
    margin: 0 !important;
    background: white;
}

.woocommerce div.product .woocommerce-tabs .panel h2 {
    font-size: 1.75rem;
    font-weight: 800;
    margin-bottom: 24px;
    color: #1e293b;
    display: none;
    /* Often redundant title */
}

.woocommerce div.product .woocommerce-tabs .panel p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #475569;
    max-width: 800px;
}

/* Responsive Tabs */
@media (max-width: 768px) {
    .wd-container-narrow {
        padding: 0 20px;
    }

    .woocommerce div.product .woocommerce-tabs .panel {
        padding: 30px 20px !important;
    }




    /* Content Padding */
    .woocommerce ul.products li.product .woocommerce-loop-product__title {
        padding: 24px 28px 8px !important;
        /* Increased padding */
        text-align: left !important;
        font-size: 1.15rem !important;
        line-height: 1.4 !important;
        margin: 0 !important;
        word-wrap: break-word !important;
    }

    .woocommerce ul.products li.product .price {
        padding: 0 28px 12px !important;
        /* Match Title Padding */
        text-align: left !important;
        display: block !important;
        margin-bottom: auto !important;
    }

    /* Button & Bottom Area */
    .woocommerce ul.products li.product .button {
        margin: 16px 28px 28px !important;
        /* Match Title Padding */
        width: auto !important;
        display: inline-flex !important;
        justify-content: center !important;
        padding: 12px 24px !important;
        border-radius: 99px !important;
        text-transform: uppercase !important;
        font-size: 0.85rem !important;
        background: #111827 !important;
        color: white !important;
        box-shadow: none !important;
        align-self: flex-start !important;
        min-width: 120px;
    }

    .woocommerce ul.products li.product .button:hover {
        background: var(--color-brand-primary) !important;
        color: white !important;
        transform: none !important;
    }
}

/* Fix Responsive overrides */
@media (max-width: 900px) {
    .woocommerce ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 600px) {
    .woocommerce ul.products {
        grid-template-columns: 1fr !important;
    }
}

/* =========================================
   SINGLE PRODUCT TABS FIX (Layout & Design)
   ========================================= */
/* 1. Structural Fix: Full Width Row Area */
.wd-tabs-section-full {
    width: 100%;
    margin-top: 80px;
    margin-bottom: 80px;
    clear: both;
    position: relative;
    background: transparent;
    /* or white if preferred */
}

/* 2. Container Constraint (Centered) */
.wd-container-narrow {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 0 24px;
}

/* 3. The Tabs Card (Premium Look) */
.woocommerce div.product .woocommerce-tabs {
    background: #ffffff;
    border-radius: 24px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.02);
    overflow: hidden;
    margin: 0 !important;
    /* Reset stray margins */
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* 4. Tab Navigation (Header) */
.woocommerce div.product .woocommerce-tabs ul.tabs {
    background: #f8fafc;
    /* Subtle grey header */
    border-bottom: 1px solid #e2e8f0;
    padding: 0 40px !important;
    margin: 0 !important;
    display: flex;
    gap: 40px;
    overflow-x: auto;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
    background: transparent !important;
    border: none !important;
    margin: 0 !important;
    padding: 24px 0 !important;
    position: relative;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
    display: none !important;
    /* Remove WC rounded corners crap */
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.1rem;
    color: #64748b;
    padding: 0 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: color 0.2s;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
    color: #0f172a;
    /* Dark text */
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active::after {
    content: '';
    position: absolute;
    bottom: 0px;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--color-hero-teal);
    display: block !important;
    border-radius: 3px 3px 0 0;
}

/* 5. Tab Content (Description/Reviews) */
.woocommerce div.product .woocommerce-tabs .panel {
    padding: 48px 40px !important;
    margin: 0 !important;
    background: white;
}

.woocommerce div.product .woocommerce-tabs .panel h2 {
    font-size: 1.75rem;
    font-weight: 800;
    margin-bottom: 24px;
    color: #1e293b;
    display: none;
    /* Often redundant title */
}

.woocommerce div.product .woocommerce-tabs .panel p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #475569;
    max-width: 800px;
}

/* Responsive Tabs */
@media (max-width: 768px) {
    .wd-container-narrow {
        padding: 0 20px;
    }

    .woocommerce div.product .woocommerce-tabs .panel {
        padding: 30px 20px !important;
    }

    .woocommerce div.product .woocommerce-tabs ul.tabs {
        padding: 0 20px !important;
    }
}



/* Content Padding */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    padding: 24px 28px 8px !important;
    /* Increased padding */
    text-align: left !important;
    font-size: 1.15rem !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    word-wrap: break-word !important;
}

.woocommerce ul.products li.product .price {
    padding: 0 28px 12px !important;
    /* Match Title Padding */
    text-align: left !important;
    display: block !important;
    margin-bottom: auto !important;
}

/* Button & Bottom Area */
.woocommerce ul.products li.product .button {
    margin: 16px 28px 28px !important;
    /* Match Title Padding */
    width: auto !important;
    display: inline-flex !important;
    justify-content: center !important;
    padding: 12px 24px !important;
    border-radius: 99px !important;
    text-transform: uppercase !important;
    font-size: 0.85rem !important;
    background: #111827 !important;
    color: white !important;
    box-shadow: none !important;
    align-self: flex-start !important;
    min-width: 120px;
}

.woocommerce ul.products li.product .button:hover {
    background: var(--color-brand-primary) !important;
    color: white !important;
    transform: none !important;
}


/* Fix Responsive overrides */
@media (max-width: 900px) {
    .woocommerce ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 600px) {
    .woocommerce ul.products {
        grid-template-columns: 1fr !important;
        margin: 0 !important;
        width: 100% !important;

        aspect-ratio: 1/1 !important;
        /* Square for consistency or 4/5 */
        object-fit: cover !important;
    }

    /* Content Padding */
    .woocommerce ul.products li.product .woocommerce-loop-product__title {
        padding: 24px 28px 8px !important;
        /* Increased padding */
        text-align: left !important;
        font-size: 1.15rem !important;
        line-height: 1.4 !important;
        margin: 0 !important;
        word-wrap: break-word !important;
    }

    .woocommerce ul.products li.product .price {
        padding: 0 28px 12px !important;
        /* Match Title Padding */
        text-align: left !important;
        display: block !important;
        margin-bottom: auto !important;
    }

    /* Button & Bottom Area */
    .woocommerce ul.products li.product .button {
        margin: 16px 28px 28px !important;
        /* Match Title Padding */
        width: auto !important;
        display: inline-flex !important;
        justify-content: center !important;
        padding: 12px 24px !important;
        border-radius: 99px !important;
        text-transform: uppercase !important;
        font-size: 0.85rem !important;
        background: #111827 !important;
        color: white !important;
        box-shadow: none !important;
        align-self: flex-start !important;
        min-width: 120px;
    }

    .woocommerce ul.products li.product .button:hover {
        background: var(--color-brand-primary) !important;
        color: white !important;
        transform: none !important;
    }
}

/* Fix Responsive overrides */
@media (max-width: 900px) {
    .woocommerce ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 600px) {
    .woocommerce ul.products {
        grid-template-columns: 1fr !important;
    }
}

/* =========================================
   SINGLE PRODUCT TABS FIX (Layout & Design)
   ========================================= */
/* 1. Structural Fix: Full Width Row Area */
.wd-tabs-section-full {
    width: 100%;
    margin-top: 80px;
    margin-bottom: 80px;
    clear: both;
    position: relative;
    background: transparent;
    /* or white if preferred */
}

/* 2. Container Constraint (Centered) */
.wd-container-narrow {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 0 24px;
}

/* 3. The Tabs Card (Premium Look) */
.woocommerce div.product .woocommerce-tabs {
    background: #ffffff;
    border-radius: 24px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.02);
    overflow: hidden;
    margin: 0 !important;
    /* Reset stray margins */
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* 4. Tab Navigation (Header) */
.woocommerce div.product .woocommerce-tabs ul.tabs {
    background: #f8fafc;
    /* Subtle grey header */
    border-bottom: 1px solid #e2e8f0;
    padding: 0 40px !important;
    margin: 0 !important;
    display: flex;
    gap: 40px;
    overflow-x: auto;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
    background: transparent !important;
    border: none !important;
    margin: 0 !important;
    padding: 24px 0 !important;
    position: relative;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
    display: none !important;
    /* Remove WC rounded corners crap */
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.1rem;
    color: #64748b;
    padding: 0 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: color 0.2s;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
    color: #0f172a;
    /* Dark text */
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active::after {
    content: '';
    position: absolute;
    bottom: 0px;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--color-hero-teal);
    display: block !important;
    border-radius: 3px 3px 0 0;
}

/* 5. Tab Content (Description/Reviews) */
.woocommerce div.product .woocommerce-tabs .panel {
    padding: 48px 40px !important;
    margin: 0 !important;
    background: white;
}

.woocommerce div.product .woocommerce-tabs .panel h2 {
    font-size: 1.75rem;
    font-weight: 800;
    margin-bottom: 24px;
    color: #1e293b;
    display: none;
    /* Often redundant title */
}

.woocommerce div.product .woocommerce-tabs .panel p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #475569;
    max-width: 800px;
}

/* Responsive Tabs */
@media (max-width: 768px) {
    .wd-container-narrow {
        padding: 0 20px;
    }

    .woocommerce div.product .woocommerce-tabs .panel {
        padding: 30px 20px !important;
    }

    .woocommerce div.product .woocommerce-tabs ul.tabs {
        padding: 0 20px !important;
    }
}


/* =========================================
   SINGLE PRODUCT LAYOUT V3 (Final Polish)
   ========================================= */

/* 1. Global Page Settings & Container */
body.single-product {
    background-color: #F9FAFB;
    /* Clean light grey */
}

/* Master Container - Controls Global Alignment */
.wd-single-product-container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 40px 24px 80px;
    /* Top padding for breathing room */
    display: flex;
    flex-direction: column;
    gap: 64px;
    /* Consistent Vertical Rhythm between major sections */
}

/* Global Section Title */
.wd-section-title-card,
.wd-related-products-wrapper h2 {
    font-family: var(--font-heading);
    font-size: 1.75rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 32px;
    letter-spacing: -0.02em;
}

/* 2. Universal Card Styling */
.wd-section-card,
.wd-sticky-buy-box-card {
    background: #FFFFFF;
    border-radius: 20px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02), 0 10px 15px -3px rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.03);
    padding: 48px;
    width: 100%;
    margin-bottom: 0;
    /* Handled by container gap */
}

/* 3. Hero Grid (60/40 Split) */
.wd-product-hero-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    /* approx 58% - 42% */
    gap: 48px;
    align-items: start;
    margin-bottom: 0;
    /* Handled by container gap */
}

/* Gallery - Clean */
.wd-col-gallery {
    width: 100%;
}

.wd-main-image-stage img {
    border-radius: 20px;
    width: 100%;
    display: block;
    cursor: zoom-in;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
}

/* Buy Box - Refined */
.wd-col-buybox {
    width: 100%;
    position: sticky;
    top: 40px;
    z-index: 10;
}

.wd-sticky-buy-box-card {
    padding: 40px;
}

/* Buy Box Typography */
.wd-product-title-hero {
    font-size: 2.25rem;
    line-height: 1.1;
    margin-bottom: 12px;
    letter-spacing: -0.01em;
}

.wd-rating-hero {
    margin-bottom: 20px;
}

.wd-price-hero p.price {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-brand-primary);
    margin-bottom: 28px;
}

/* Checklist */
.wd-product-checklist-hero {
    background: #F8FAFC;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 32px;
}

.checklist-title {
    font-size: 0.9rem;
    text-transform: uppercase;
    color: #64748B;
    margin-bottom: 12px;
    letter-spacing: 0.05em;
}

.wd-product-checklist-hero ul li {
    margin-bottom: 10px;
    font-size: 1rem;
    color: #334155;
    display: flex;
    align-items: center;
    gap: 12px;
}

.wd-product-checklist-hero ul li .dashicons {
    color: var(--color-brand-primary);
    background: #fff;
    border-radius: 50%;
    padding: 2px;
}

/* CTA Buttons */
.wd-add-to-cart-hero .single_add_to_cart_button {
    width: 100%;
    background: #111827;
    color: #fff;
    height: 56px;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 16px;
    transition: transform 0.2s, box-shadow 0.2s;
}

.wd-add-to-cart-hero .single_add_to_cart_button:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

/* 4. "Why Choose" - Card Layout */
.wd-why-choose-card .wd-features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

.wd-feature-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

.feat-icon .dashicons {
    font-size: 32px;
    width: 56px;
    height: 56px;
    background: #ECFDF5;
    color: var(--color-brand-primary);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.feat-content h5 {
    font-size: 1.1rem;
    margin-bottom: 8px;
    color: #111827;
}

/* 5. Tabs - Polished Card */
.wd-tabs-card {
    padding: 0 !important;
    /* Reset padding to manual control */
    overflow: hidden;
}

.woocommerce-tabs ul.tabs {
    background: #F8FAFC;
    border-bottom: 1px solid #E2E8F0;
    padding: 0 48px !important;
    display: flex;
    gap: 40px;
}

.woocommerce-tabs ul.tabs li {
    padding: 24px 0 !important;
    border: none !important;
    background: transparent !important;
}

.woocommerce-tabs ul.tabs li a {
    color: #64748B;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.95rem;
    letter-spacing: 0.05em;
    padding: 0 !important;
}

.woocommerce-tabs ul.tabs li.active {
    border-bottom: 3px solid var(--color-brand-primary) !important;
    margin-bottom: -1px;
}

.woocommerce-tabs ul.tabs li.active a {
    color: #111827;
}

.woocommerce-tabs .panel {
    padding: 56px 48px !important;
    max-width: 800px;
    /* Readable line length */
    margin: 0 auto !important;
}

/* 6. FAQ Block - Accordion Style */
.wd-faq-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.wd-faq-item {
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    padding: 20px 24px;
    transition: all 0.2s;
}

.wd-faq-item[open] {
    background: #F9FAFB;
    border-color: #D1D5DB;
}

.wd-faq-item summary {
    font-weight: 600;
    font-size: 1.05rem;
    color: #111827;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Custom Arrow */
.wd-faq-item summary::after {
    content: '+';
    font-size: 1.5rem;
    font-weight: 400;
    color: #9CA3AF;
}

.wd-faq-item[open] summary::after {
    content: '-';
    color: var(--color-brand-primary);
}

.wd-faq-item .faq-content {
    margin-top: 16px;
    color: #4B5563;
    line-height: 1.6;
    font-size: 1rem;
}

/* 7. Related Products Grid */
.wd-related-products-wrapper ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    /* 4 cols on desktop */
    gap: 32px !important;
}

.wd-related-products-wrapper ul.products li.product {
    background: #fff;
    border-radius: 16px;
    border: 1px solid rgba(0, 0, 0, 0.04);
    overflow: hidden;
    transition: transform 0.2s;
}

.wd-related-products-wrapper ul.products li.product:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}

.wd-related-products-wrapper ul.products li.product img {
    height: 240px !important;
    object-fit: cover;
    width: 100%;
}

.wd-related-products-wrapper .woocommerce-loop-product__title {
    padding: 16px 20px 8px !important;
    font-size: 1rem !important;
}

.wd-related-products-wrapper .price {
    padding: 0 20px 16px !important;
}

/* 8. Responsiveness */
@media (max-width: 1024px) {
    .wd-product-hero-grid {
        grid-template-columns: 1fr;
        /* Stack Hero */
        gap: 40px;
    }

    .wd-col-buybox {
        position: static;
        max-width: 100%;
    }

    .wd-related-products-wrapper ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 768px) {
    .wd-single-product-container {
        padding: 24px 16px 64px;
        gap: 48px;
    }

    .wd-section-card,
    .wd-sticky-buy-box-card {
        padding: 24px;
    }

    .wd-why-choose-card .wd-features-grid {
        grid-template-columns: 1fr;
        /* Stack Features */
    }

    .wd-related-products-wrapper ul.products {
        grid-template-columns: 1fr !important;
    }
}

/* 9. Layout Defensive */
.woocommerce div.product {
    display: block !important;
}

/* =========================================
   MASTER SHOP ARCHIVE OVERHAUL
   ========================================= */

/* 1. Archive Header (Title + Ordering) */
.woocommerce-products-header {
    background: transparent;
    max-width: var(--container-max);
    margin: 0 auto 48px auto;
    padding: 0 var(--container-padding);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}

.woocommerce-products-header__title.page-title {
    font-size: 2.5rem;
    color: var(--color-text-main);
    margin-bottom: 0 !important;
    text-transform: capitalize;
    letter-spacing: -0.02em;
}

/* Move Default Sorting to align with grid */
.woocommerce-ordering {
    margin-bottom: 0 !important;
}

.woocommerce-ordering select {
    padding: 12px 24px;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--color-text-secondary);
    background-color: white;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: all 0.2s ease;
}

.woocommerce-ordering select:hover {
    border-color: var(--color-brand-primary);
}

/* 2. Master Product Grid */
.woocommerce ul.products {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    /* Standard 3 Col */
    gap: 48px 32px !important;
    /* Row 48px, Col 32px */
    max-width: var(--container-max);
    margin: 0 auto 80px auto !important;
    padding: 0 var(--container-padding) !important;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after {
    display: none !important;
    /* Remove float clears */
}

/* 3. Product Card Styling (Shopify Premium) */
.woocommerce ul.products li.product {
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
    background: #FFFFFF;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(0, 0, 0, 0.03);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}

.woocommerce ul.products li.product:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-hover);
}

/* Image Wrapper */
.woocommerce ul.products li.product a img {
    width: 100%;
    aspect-ratio: 4/5;
    /* Premium Portrait Ratio */
    object-fit: cover;
    margin: 0 !important;
    transition: transform 0.5s ease;
}

.woocommerce ul.products li.product:hover a img {
    transform: scale(1.03);
}

/* Content Area */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    padding: 20px 24px 8px !important;
    font-size: 1.1rem !important;
    color: var(--color-text-main);
    font-weight: 600;
}

.woocommerce ul.products li.product .price {
    padding: 0 24px 16px !important;
    color: var(--color-brand-primary) !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    margin-bottom: auto !important;
    /* Pushes button down if flex */
    align-self: center;
}

.woocommerce ul.products li.product .button:hover {
    background: var(--color-brand-primary) !important;
    box-shadow: var(--shadow-sm) !important;
}

/* Responsive Grid */
@media (max-width: 1280px) {
    .woocommerce ul.products {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

@media (max-width: 1024px) {
    .woocommerce ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 768px) {
    .woocommerce ul.products {
        grid-template-columns: 1fr !important;
    }

    .woocommerce-products-header {
        flex-direction: column;
        gap: 24px;
        text-align: center;
    }
}

/* =========================================
   HOMEPAGE HERO REFINEMENT (Master Prompt)
   ========================================= */

/* 1. Header behavior on Home: Relative to stack naturally */
body.home .site-header {
    position: relative !important;
    padding: 20px 0 !important;
    /* Keep pill vertical spacing */
    background: transparent;
    margin-bottom: 0 !important;
}

/* 2. Remove Global Offset on Home Content */
body.home .site-content,
body.home .site-main,
body.home #primary {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* 3. Hero Block Layout & Spacing */
.wd-hero-block {
    background-color: var(--color-bg-hero);
    /* "Flush" spacing: Internal padding only */
    padding-top: 80px !important;
    padding-bottom: 80px !important;
    margin-top: 0 !important;
    position: relative;
    z-index: 1;
    /* Below header */
}

/* 4. Container Alignment */
.wd-hero-block .hero-grid {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding);
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 64px;
    align-items: center;
}

/* Defensive Elementor Reset (Per Prompt) */
.elementor-section,
.hero-section,
.elementor-top-section {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Tablet/Mobile Stacking */
@media (max-width: 960px) {
    .wd-hero-block .hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 40px;
    }

    .wd-hero-block {
        padding-top: 60px !important;
        padding-bottom: 60px !important;
    }

    body.home .site-header {
        font-size: 2.5rem;
        color: var(--color-text-main);
        margin-bottom: 0 !important;
        text-transform: capitalize;
        letter-spacing: -0.02em;
    }

    /* Move Default Sorting to align with grid */
    .woocommerce-ordering {
        margin-bottom: 0 !important;
    }

    .woocommerce-ordering select {
        padding: 12px 24px;
        border-radius: 999px;
        border: 1px solid var(--color-border);
        font-family: var(--font-body);
        font-size: 0.95rem;
        color: var(--color-text-secondary);
        background-color: white;
        box-shadow: var(--shadow-sm);
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .woocommerce-ordering select:hover {
        border-color: var(--color-brand-primary);
    }

    /* 2. Master Product Grid */
    .woocommerce ul.products {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        /* Standard 3 Col */
        gap: 48px 32px !important;
        /* Row 48px, Col 32px */
        max-width: var(--container-max);
        margin: 0 auto 80px auto !important;
        padding: 0 var(--container-padding) !important;
    }

    .woocommerce ul.products::before,
    .woocommerce ul.products::after {
        display: none !important;
        /* Remove float clears */
    }

    /* 3. Product Card Styling (Shopify Premium) */
    .woocommerce ul.products li.product {
        float: none !important;
        width: 100% !important;
        margin: 0 !important;
        background: #FFFFFF;
        border-radius: var(--radius-lg);
        border: 1px solid rgba(0, 0, 0, 0.03);
        box-shadow: var(--shadow-card);
        overflow: hidden;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        display: flex;
        flex-direction: column;
    }

    .woocommerce ul.products li.product:hover {
        transform: translateY(-8px);
        box-shadow: var(--shadow-hover);
    }

    /* Image Wrapper */
    .woocommerce ul.products li.product a img {
        width: 100%;
        aspect-ratio: 4/5;
        /* Premium Portrait Ratio */
        object-fit: cover;
        margin: 0 !important;
        transition: transform 0.5s ease;
    }

    .woocommerce ul.products li.product:hover a img {
        transform: scale(1.03);
    }

    /* Content Area */
    .woocommerce ul.products li.product .woocommerce-loop-product__title {
        padding: 20px 24px 8px !important;
        font-size: 1.1rem !important;
        color: var(--color-text-main);
        font-weight: 600;
    }

    .woocommerce ul.products li.product .price {
        padding: 0 24px 16px !important;
        color: var(--color-brand-primary) !important;
        font-weight: 700 !important;
        font-size: 1rem !important;
        margin-bottom: auto !important;
        /* Pushes button down if flex */
        align-self: center;
    }

    .woocommerce ul.products li.product .button:hover {
        background: var(--color-brand-primary) !important;
        box-shadow: var(--shadow-sm) !important;
    }

    /* Badge Helper */
    .wd-badge-best {
        position: absolute;
        top: 12px;
        left: 12px;
        background: #FDE047;
        color: #111;
        font-size: 0.75rem;
        font-weight: 700;
        padding: 4px 10px;
        border-radius: 4px;
        text-transform: uppercase;
        z-index: 2;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    }

    .wd-card-badge--category {
        position: absolute;
        top: 12px;
        right: 12px;
        background: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(4px);
        color: #6B7280;
        font-size: 0.7rem;
        font-weight: 600;
        padding: 4px 8px;
        border-radius: 4px;
        z-index: 2;
        border: 1px solid rgba(0, 0, 0, 0.05);
    }

    /* Responsive Grid */
    @media (max-width: 1280px) {
        .woocommerce ul.products {
            grid-template-columns: repeat(3, 1fr) !important;
        }
    }

    @media (max-width: 1024px) {
        .woocommerce ul.products {
            grid-template-columns: repeat(2, 1fr) !important;
        }
    }

    @media (max-width: 768px) {
        .woocommerce ul.products {
            grid-template-columns: 1fr !important;
        }

        .woocommerce-products-header {
            flex-direction: column;
            gap: 24px;
            text-align: center;
        }
    }

    /* =========================================
   HOMEPAGE HERO REFINEMENT (Master Prompt)
   ========================================= */

    /* 1. Header behavior on Home: Relative to stack naturally */

    body.home .site-header {
        position: absolute !important;
        top: 0;
        left: 0;
        width: 100%;
        padding: 32px 0 !important;
        /* Increased spacing */
        background: transparent;
        margin-bottom: 0 !important;
        z-index: 50;
        transition: background 0.3s ease, padding 0.3s ease, box-shadow 0.3s ease;
    }

    /* Sticky Scrolled State */
    body.home .site-header.wd-header-scrolled {
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(10px);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
        padding: 16px 0 !important;
        position: fixed !important;
    }

    /* Nav Links Hover */
    .main-navigation a {
        position: relative;
        font-weight: 600;
    }

    .main-navigation a::after {
        content: '';
        position: absolute;
        bottom: -4px;
        left: 0;
        width: 0%;
        height: 2px;
        background: var(--color-text-main);
        transition: width 0.3s ease;
    }

    .main-navigation a:hover::after {
        width: 100%;
    }

    /* Logo Scale */
    .logo-badge img {
        transform: scale(1.15);
        transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    .logo-badge:hover img {
        transform: scale(1.25);
    }

    /* Header Outline Button */
    .btn-outline-nav {
        border: 2px solid #111;
        padding: 10px 24px;
        border-radius: 99px;
        font-weight: 700;
        font-size: 0.9rem;
        transition: all 0.2s;
        margin-right: 12px;
    }

    .btn-outline-nav:hover {
        background: #111;
        color: #fff !important;
    }

    /* 2. Remove Global Offset on Home Content */
    body.home .site-content,
    body.home .site-main,
    body.home #primary {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    /* 3. Hero Block Layout & Spacing */
    .wd-hero-block {
        background: var(--color-bg-hero, #FDE047);
        background-image: var(--color-bg-texture);
        /* Subtle Gradient */
        padding-top: 180px !important;
        padding-bottom: 110px !important;
        margin-top: 0 !important;
        position: relative;
        z-index: 1;
    }

    .hero-title {
        font-size: 4rem;
        line-height: 1.05;
        letter-spacing: -0.03em;
        margin-bottom: 24px;
    }

    .hero-trust {
        font-size: 0.85rem;
        font-weight: 600;
        color: rgba(17, 24, 39, 0.6);
        margin-top: 24px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .hero-trust::before {
        content: '';
        display: inline-block;
        width: 8px;
        height: 8px;
        background: #10B981;
        /* Green Dot */
        border-radius: 50%;
    }

    .btn-outline-hero {
        padding: 14px 32px;
        border: 2px solid #111;
        color: #111;
        font-weight: 700;
        border-radius: 99px;
        margin-left: 16px;
        transition: all 0.2s;
        display: inline-block;
    }

    .btn-outline-hero:hover {
        background: rgba(255, 255, 255, 0.5);
        color: #000;
        transform: translateY(-2px);
    }

    /* 4. Container Alignment */
    .wd-hero-block .hero-grid {
        max-width: var(--container-max);
        margin: 0 auto;
        padding: 0 var(--container-padding);
        display: grid;
        grid-template-columns: 1.2fr 1fr;
        gap: 64px;
        align-items: center;
    }

    /* Defensive Elementor Reset (Per Prompt) */
    .elementor-section,
    .hero-section,
    .elementor-top-section {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    /* Tablet/Mobile Stacking */
    @media (max-width: 960px) {
        .wd-hero-block .hero-grid {
            grid-template-columns: 1fr;
            text-align: center;
            gap: 40px;
        }

        .wd-hero-block {
            padding-top: 140px !important;
            padding-bottom: 80px !important;
        }

        body.home .site-header {
            position: relative !important;
        }
    }



    /* Move Default Sorting to align with grid */
    .woocommerce-ordering {
        margin-bottom: 0 !important;
    }

    .woocommerce-ordering select {
        padding: 12px 24px;
        border-radius: 999px;
        border: 1px solid var(--color-border);
        font-family: var(--font-body);
        font-size: 0.95rem;
        color: var(--color-text-secondary);
        background-color: white;
        box-shadow: var(--shadow-sm);
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .woocommerce-ordering select:hover {
        border-color: var(--color-brand-primary);
    }

    /* 2. Master Product Grid */
    .woocommerce ul.products {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        /* Standard 3 Col */
        gap: 48px 32px !important;
        /* Row 48px, Col 32px */
        max-width: var(--container-max);
        margin: 0 auto 80px auto !important;
        padding: 0 var(--container-padding) !important;
    }

    .woocommerce ul.products::before,
    .woocommerce ul.products::after {
        display: none !important;
        /* Remove float clears */
    }

    /* 3. Product Card Styling (Shopify Premium) */
    .woocommerce ul.products li.product {
        float: none !important;
        width: 100% !important;
        margin: 0 !important;
        background: #FFFFFF;
        border-radius: var(--radius-lg);
        border: 1px solid rgba(0, 0, 0, 0.03);
        box-shadow: var(--shadow-card);
        overflow: hidden;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        display: flex;
        flex-direction: column;
    }

    .woocommerce ul.products li.product:hover {
        transform: translateY(-8px);
        box-shadow: var(--shadow-hover);
    }

    /* Image Wrapper */
    .woocommerce ul.products li.product a img {
        width: 100%;
        aspect-ratio: 4/5;
        /* Premium Portrait Ratio */
        object-fit: cover;
        margin: 0 !important;
        transition: transform 0.5s ease;
    }

    .woocommerce ul.products li.product:hover a img {
        transform: scale(1.03);
    }

    /* Content Area */
    .woocommerce ul.products li.product .woocommerce-loop-product__title {
        padding: 20px 24px 8px !important;
        font-size: 1.1rem !important;
        color: var(--color-text-main);
        font-weight: 600;
    }

    .woocommerce ul.products li.product .price {
        padding: 0 24px 16px !important;
        color: var(--color-brand-primary) !important;
        font-weight: 700 !important;
        font-size: 1rem !important;
        margin-bottom: auto !important;
        /* Pushes button down if flex */
        align-self: center;
    }

    .woocommerce ul.products li.product .button:hover {
        background: var(--color-brand-primary) !important;
        box-shadow: var(--shadow-sm) !important;
    }

    /* Responsive Grid */
    @media (max-width: 1280px) {
        .woocommerce ul.products {
            grid-template-columns: repeat(3, 1fr) !important;
        }
    }

    @media (max-width: 1024px) {
        .woocommerce ul.products {
            grid-template-columns: repeat(2, 1fr) !important;
        }
    }

    @media (max-width: 768px) {
        .woocommerce ul.products {
            grid-template-columns: 1fr !important;
        }

        .woocommerce-products-header {
            flex-direction: column;
            gap: 24px;
            text-align: center;
        }
    }

    /* =========================================
   HOMEPAGE HERO REFINEMENT (Master Prompt)
   ========================================= */

    /* 1. Header behavior on Home: Relative to stack naturally */
    body.home .site-header {
        position: absolute !important;
        padding: 20px 0 !important;
        background: transparent;
        margin-bottom: 0 !important;
    }

    /* 2. Remove Global Offset on Home Content */
    body.home .site-content,
    body.home .site-main,
    body.home #primary {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    /* 3. Hero Block Layout & Spacing */
    .wd-hero-block {
        background-color: var(--color-bg-hero);
        /* "Flush" spacing: Internal padding only */
        padding-top: 80px !important;
        padding-bottom: 80px !important;
        margin-top: 0 !important;
        position: relative;
        z-index: 1;
        /* Below header */
    }

    /* 4. Container Alignment */
    .wd-hero-block .hero-grid {
        max-width: var(--container-max);
        margin: 0 auto;
        padding: 0 var(--container-padding);
        display: grid;
        grid-template-columns: 1.2fr 1fr;
        gap: 64px;
        align-items: center;
    }

    /* Defensive Elementor Reset (Per Prompt) */
    .elementor-section,
    .hero-section,
    .elementor-top-section {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    /* Tablet/Mobile Stacking */
    @media (max-width: 960px) {
        .wd-hero-block .hero-grid {
            grid-template-columns: 1fr;
            text-align: center;
            gap: 40px;
        }

        .wd-hero-block {
            padding-top: 60px !important;
            padding-bottom: 60px !important;
        }

        body.home .site-header {
            position: relative !important;
        }
    }

    /* =========================================
   SHOP HERO & FILTERS (Clean Style Rebuild)
   ========================================= */

    /* Closing any potential unclosed blocks from earlier in the file */
}


/* =========================================
   SHOP HERO & FILTERS (Clean Style Rebuild - GLOBAL FIX)
   ========================================= */

/* 1. Clean Shop Hero */
.wd-shop-hero {
    background: transparent !important;
    padding: 32px 0 24px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    margin-bottom: 0;
    position: relative;
    z-index: 10;
}

.wd-shop-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr);
    align-items: center;
    gap: 24px;
}

/* Typography */
.wd-shop-hero-text .wd-breadcrumb {
    font-size: 12px;
    opacity: .6;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 500;
}

.wd-page-title {
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    line-height: 1.1;
    color: var(--color-text-main);
    margin-bottom: 8px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.wd-page-subtitle {
    font-size: 1.1rem;
    color: var(--color-text-secondary);
    font-family: var(--font-body);
    max-width: 600px;
    margin-bottom: 0;
    line-height: 1.5;
}

/* Sorting */
.wd-shop-hero-sort {
    display: flex;
    justify-content: flex-end;
}

.wd-shop-hero-sort select {
    padding: 8px 16px;
    border-radius: 8px;
    border: 1px solid var(--color-border);
    background-color: #fff;
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--color-text-main);
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* 2. Filter Pills (Clean List Style) */
.wd-shop-filters {
    padding: 24px 0 32px;
}

.wd-filter-pills {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0;
    padding: 0;
}

.wd-filter-pills li {
    margin: 0;
    padding: 0;
}

.wd-filter-pills a,
.wd-filter-pills button {
    display: inline-block;
    padding: 6px 16px;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: #fff;
    font-size: 13px;
    color: var(--color-text-secondary);
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
    font-weight: 500;
}

.wd-filter-pills a:hover,
.wd-filter-pills button:hover {
    border-color: var(--color-brand-primary);
    color: var(--color-brand-primary);
}

.wd-filter-pills a.is-active,
.wd-filter-pills button.is-active {
    background: var(--color-brand-primary);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 2px 8px rgba(20, 184, 166, 0.25);
}

/* Product Grid Spacing */
.woocommerce ul.products {
    margin-top: 32px !important;
}

/* Responsive */
@media (max-width: 767px) {
    .wd-shop-hero-inner {
        grid-template-columns: 1fr;
    }

    .wd-shop-hero-sort {
        justify-content: flex-start;
        margin-top: 16px;
    }
}

/* =========================================
   PREMIUM PRODUCT CARD BUTTONS (v3.1)
   ========================================= */

/* 1. Flexbox Footer Alignment */
.wd-card-footer {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 0 24px 24px !important;
    margin-top: auto;
}

/* 2. Price Refinement (Left Aligned) */
.wd-price {
    margin-bottom: 0 !important;
    text-align: left !important;
    font-size: 1.1rem !important;
    color: var(--color-hero-teal, #14B8A6) !important;
    font-weight: 800 !important;
}

/* 3. Premium View Button (Pill, Bottom Right) */
.wd-actions {
    display: flex;
}

.wd-btn-view {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 40px !important;
    padding: 0 24px !important;
    border-radius: 999px !important;
    background-color: var(--color-text-main, #111827) !important;
    /* Navy */
    color: #fff !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
    border: none !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    line-height: 1 !important;
    text-decoration: none !important;
}

.wd-btn-view:hover {
    background-color: var(--color-brand-primary, #14B8A6) !important;
    /* Teal Hover */
    transform: translateY(-2px) scale(1.02) !important;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15) !important;
    color: #fff !important;
}

/* Mobile Touch Target */
@media (max-width: 768px) {
    .wd-btn-view {
        padding: 0 28px !important;
        /* Slightly wider touch area, keeping Right Alignment as requested */
    }
}

/* =========================================
   10. PAGE TEMPLATES (Elementor Ready)
   ========================================= */

/* Standard Page (page.php) */
.wd-page-standard {
    padding-top: 150px;
    /* Header Offset + Spacing */
    padding-bottom: 80px;
    max-width: 1200px;
    margin: 0 auto;
}

.wd-page-header-standard {
    text-align: center;
    margin-bottom: 60px;
}

.wd-page-title-standard {
    font-size: 3.5rem;
    font-weight: 900;
    color: var(--color-brand-primary);
    text-transform: uppercase;
}

.wd-page-content-box {
    background: white;
    padding: 50px;
    border-radius: 25px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.03);
    border: 2px solid #f9f9f9;
}

.wd-entry-content-standard {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #444;
}

/* Responsive Standard Page */
@media (max-width: 768px) {
    .wd-page-standard {
        padding-top: 120px;
        padding-left: 20px;
        padding-right: 20px;
    }

    .wd-page-title-standard {
        font-size: 2.5rem;
    }

    .wd-page-content-box {
        padding: 30px;
    }
}

/* Full Width Page (page-fullwidth.php) */
.wd-page-fullwidth {
    width: 100%;
    margin: 0;
    padding: 0;
    /* Elementor handles the rest */
}

/* FORCE GLOBAL WHITE BACKGROUND */
html,
body,
.elementor-kit-0,
.elementor-page {
    background-color: #ffffff !important;
    background-image: none !important;
}


/* =========================================
   11. NEW FOOTER (v3 Minimalist)
   ========================================= */
.site-footer {
    padding: 60px 0 30px;
    background: #fff;
    border-top: 1px solid #f9f9f9;
}

.footer-links a {
    color: #444;
    text-decoration: none;
    transition: color 0.2s;
    font-weight: 500;
}

.footer-links a:hover,
.footer-legal-links a:hover {
    color: var(--color-brand-primary) !important;
}

@media (max-width: 768px) {
    .footer-grid {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
        text-align: center;
    }

    .footer-brand,
    .social-links,
    .footer-legal-links {
        justify-content: center !important;
    }

    .footer-bottom-row {
        flex-direction: column-reverse;
        gap: 20px;
        text-align: center;
    }
}


/* =========================================
   12. REFINED MINIMALIST FOOTER (V2)
   ========================================= */

/* Grid Layout */
.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: 60px;
    margin-bottom: 40px;
}

/* Headings & Text */
.footer-logo-text {
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: 12px;
    color: var(--color-brand-primary);
}

.brand-desc {
    font-size: 0.95rem;
    color: var(--color-text-secondary);
    line-height: 1.5;
    margin-bottom: 20px;
    max-width: 280px;
}

.footer-heading {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 700;
    color: #9CA3AF;
    margin-bottom: 15px;
    /* Tighter heading gap */
}

/* Links (The Tighter List) */
.footer-menu {
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* High reduction in gap (was 15px+) */
}

.footer-menu a {
    text-decoration: none;
    color: var(--color-text-main);
    font-size: 0.95rem;
    font-weight: 500;
    transition: color 0.2s;
    line-height: 1.4;
    /* Tighter line height */
}

.footer-menu a:hover {
    color: var(--color-brand-primary);
    transform: translateX(3px);
    /* Micro interaction */
    display: inline-block;
}

/* Social Icons */
.footer-socials {
    display: flex;
    gap: 12px;
}

.footer-socials a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #F3F4F6;
    color: #111 !important;
    /* Force visibility */
    transition: all 0.2s;
    font-size: 1rem;
    text-decoration: none;
}

.footer-socials a:hover {
    background: var(--color-brand-primary);
    color: white !important;
    transform: translateY(-2px);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
    }

    .brand-desc {
        margin: 0 auto 20px;
        /* Center text */
    }

    .footer-socials {
        justify-content: center;
    }

    .footer-menu {
        align-items: center;
        gap: 12px;
        /* Slightly more breathe room for touch */
    }
}


/* =========================================
   12. DARK PREMIUM FOOTER (V3)
   ========================================= */

.site-footer {
    background-color: #111827 !important;
    /* Premium Navy */
    color: #9CA3AF;
    padding: 80px 0 40px;
    border-top: none;
    margin-top: 80px;
}

/* Brand */
.footer-logo-text {
    color: #FFFFFF !important;
    font-size: 1.8rem;
    letter-spacing: -1px;
}

.brand-desc {
    color: #9CA3AF;
    font-size: 0.9rem;
    max-width: 250px;
    opacity: 0.8;
}

/* Headings */
.footer-heading {
    color: #FFFFFF !important;
    opacity: 0.4;
    font-size: 0.75rem;
    letter-spacing: 2px;
    margin-bottom: 25px;
}

/* Links */
.footer-menu a {
    color: #E5E7EB;
    /* Light Grey */
    opacity: 0.8;
    font-weight: 400;
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.footer-menu a:hover {
    color: var(--color-brand-primary) !important;
    /* Teal Glow */
    opacity: 1;
    padding-left: 5px;
    /* Slight nudge */
    background: transparent;
}

/* Social Icons (Dark Mode) */
.footer-socials a {
    background: rgba(255, 255, 255, 0.05);
    /* Glass effect */
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-socials a:hover {
    background: var(--color-brand-primary);
    border-color: var(--color-brand-primary);
    transform: translateY(-3px);
}

/* Bottom Bar */
.site-info {
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    margin-top: 60px;
    padding-top: 30px;
}

.copyright-text {
    color: #6B7280;
    font-size: 0.85rem;
}

.footer-legal-links a {
    color: #6B7280 !important;
    transition: color 0.2s;
    font-size: 0.85rem;
}

.footer-legal-links a:hover {
    color: #fff !important;
    text-decoration: underline;
}


/* =========================================
   12. YELLOW BRAND FOOTER (V4 - Hero Match)
   ========================================= */

.site-footer {
    background-color: #FDE047 !important;
    /* Hero Yellow */
    color: #111827;
    /* Dark Navy Text */
    padding: 80px 0 40px;
    border-top: none;
    margin-top: 0;
    /* Merge with any previous yellow section */
}

/* Brand */
.footer-logo-text {
    color: #111827 !important;
    font-size: 1.8rem;
    letter-spacing: -1px;
}

.brand-desc {
    color: #374151;
    /* Grey 700 */
    font-size: 0.95rem;
    font-weight: 500;
}

/* Headings */
.footer-heading {
    color: #111827 !important;
    opacity: 0.6;
    font-size: 0.75rem;
    letter-spacing: 2px;
    font-weight: 800;
    margin-bottom: 25px;
}

/* Links */
.footer-menu a {
    color: #1F2937;
    /* Grey 800 */
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.2s ease;
}

.footer-menu a:hover {
    color: #000000 !important;
    transform: translateX(5px);
    text-decoration: underline;
}

/* Social Icons (Yellow Mode) */
.footer-socials a {
    background: #111827;
    /* Dark Navy Button */
    color: #FDE047 !important;
    /* Yellow Icon */
    border: none;
}

.footer-socials a:hover {
    background: #000;
    color: #fff !important;
    transform: translateY(-3px);
}

/* Bottom Bar */
.site-info {
    border-top: 2px solid rgba(0, 0, 0, 0.05) !important;
    margin-top: 60px;
    padding-top: 30px;
}

.copyright-text {
    color: #4B5563;
    font-weight: 500;
}

.footer-legal-links a {
    color: #4B5563 !important;
    font-weight: 600;
}

.footer-legal-links a:hover {
    color: #000 !important;
}


/* =========================================
   13. PORTFOLIO BUTTON REFINEMENTS
   ========================================= */

/* Main View Case Study Button */
.wd-btn-view {
    background-color: #111827 !important;
    /* Navy */
    color: #FFFFFF !important;
    border: none;
    padding: 14px 32px;
    border-radius: 99px;
    /* Pill Shape */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 4px 6px rgba(17, 24, 39, 0.1);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.wd-btn-view::after {
    content: '?';
    transition: transform 0.2s;
}

.wd-btn-view:hover {
    background-color: #000000 !important;
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(17, 24, 39, 0.2);
}

.wd-btn-view:hover::after {
    transform: translateX(4px);
}

/* Secondary/Ghost Buttons (if any) */
.wd-btn-ghost {
    background: transparent;
    border: 2px solid #111827;
    color: #111827;
    padding: 12px 28px;
    border-radius: 99px;
    font-weight: 700;
}


/* =========================================
   14. GOLDEN RATIO SPACING SYSTEM (1.618)
   ========================================= */
:root {
    /* 
       Base Unit: 1rem (16px)
       Golden Ratio Scale: 1.618 
       Sequence: 10, 16, 26, 42, 68, 110
    */
    --space-2xs: 0.618rem;
    /* ~10px */
    --space-xs: 1rem;
    /* 16px */
    --space-sm: 1.618rem;
    /* ~26px */
    --space-md: 2.618rem;
    /* ~42px */
    --space-lg: 4.236rem;
    /* ~68px */
    --space-xl: 6.854rem;
    /* ~110px */
    --space-2xl: 11.09rem;
    /* ~177px */

    /* Layout Overrides using Golden Ratio */
    --section-spacing: var(--space-xl);
    /* ~110px */
    --container-padding: var(--space-md);
    /* ~42px */
    --gap-grid: var(--space-md);
}

/* Apply to Main Container */
.container,
.wd-container {
    padding-left: var(--space-md) !important;
    padding-right: var(--space-md) !important;
    max-width: 1280px;
    /* Kept standard width, but padding is now golden */
}

/* Apply to Sections */
.site-main>section,
.wd-section {
    padding-top: var(--space-xl) !important;
    padding-bottom: var(--space-xl) !important;
}

/* Card Padding (Golden Inner Spacing) */
.wd-portfolio-hero,
.wd-hero-content,
.product-grid,
.footer-grid {
    gap: var(--space-lg) !important;
    /* ~68px */
}

.footer-col {
    gap: var(--space-sm) !important;
    /* ~26px */
}

/* Typography Scale (Golden Ratio) */
h1,
.wd-page-title {
    font-size: 4.236rem !important;
}

h2,
.wd-project-title {
    font-size: 2.618rem !important;
}

h3 {
    font-size: 1.618rem !important;
}

p,
body {
    font-size: 1rem;
    line-height: 1.618;
}


/* =========================================
   13. PORTFOLIO PAGE REFINEMENTS (Spaced & Responsive)
   ========================================= */

.portfolio-archive-container {
    padding: 24px 24px 80px;
    /* Tighter Top Padding after Hero */
    max-width: 1280px;
    margin: 0 auto;
}

/* Filter Pills Row */
.wd-filter-pills {
    display: flex;
    list-style: none;
    padding: 0;
    gap: 12px;
    flex-wrap: wrap;
    /* Allow wrapping on small screens */
}

/* Ensure Links look like buttons */
.wd-filter-pills a {
    display: inline-block;
    padding: 10px 24px;
    border-radius: 99px;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    transition: all 0.2s;
}

/* HERO CARD (Split Layout) */
.wd-portfolio-hero {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 0;
    /* No gap between image and content */
    background: #fff;
    border-radius: 30px;
    overflow: hidden;
    margin-bottom: 80px;
    /* Space before strip */
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.06);
    /* Premium softly elevated shadow */
    cursor: pointer;
    transition: transform 0.3s ease;
}

.wd-portfolio-hero:hover {
    transform: translateY(-5px);
}

.wd-hero-image-wrapper {
    height: 100%;
    min-height: 450px;
    position: relative;
}

.wd-hero-content {
    padding: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.wd-project-meta-date {
    text-transform: uppercase;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #F59E0B;
    /* Gold-ish accent */
    margin-bottom: 20px;
}

.wd-project-title {
    font-size: 2.8rem;
    font-weight: 900;
    color: #111827;
    margin-bottom: 10px;
    /* Reduced from 20px */
    line-height: 1.1;
}

.wd-project-summary {
    color: #4B5563;
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 16px;
    /* Reduced from 30px */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Chips */
.wd-chips-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 24px;
    /* Reduced from 40px */
}

.wd-chip {
    padding: 6px 16px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.wd-chip.primary {
    background: #F3F4F6;
    color: #374151;
}

/* View Button */
.wd-btn-view {
    padding: 14px 32px;
    background: #111827;
    color: white;
    font-weight: 700;
    border: none;
    border-radius: 99px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: background 0.2s;
}

.wd-btn-view:hover {
    background: #000;
}

/* RECENT STRIP (Grid) */
.wd-strip-header {
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: 30px;
    color: #111;
}

.wd-project-strip {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 30px;
}

.wd-strip-card {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    gap: 15px;

}

.wd-strip-img {
    width: 100%;
    aspect-ratio: 1/1;
    /* Square Thumbs */
    object-fit: cover;
    border-radius: 20px;
    transition: transform 0.3s;
}

.wd-strip-card:hover .wd-strip-img {
    transform: scale(1.05);
}

.wd-strip-title {
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
    color: #111;
}

.wd-strip-cat {
    font-size: 0.8rem;
    color: #6B7280;
}

/* MOBILE RESPONSIVE */
@media (max-width: 900px) {

    /* Header Padding reduces on mobile */
    .wd-shop-header-group {
        padding-top: 100px !important;
        padding-bottom: 30px !important;
    }

    .wd-page-title {
        font-size: 2.5rem !important;
    }

    /* Stack Hero Card */
    .wd-portfolio-hero {
        grid-template-columns: 1fr;
    }

    .wd-hero-image-wrapper {
        min-height: 250px;
    }

    .wd-hero-content {
        padding: 40px 30px;
    }

    /* Filter Pills Horizontal Scroll */
    .wd-portfolio-filters {
        overflow-x: auto;
        padding-bottom: 15px;
        /* Scrollbar room */
    }

    .wd-filter-pills {
        flex-wrap: nowrap;
        white-space: nowrap;
    }
}


/* =========================================
   14. PREMIUM PORTFOLIO ENHANCEMENTS (Solid Yellow)
   ========================================= */

/* Overwrite Defaults for Premium Feel */
.wd-portfolio-filters .wd-filter-pills {
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(10px);
    padding: 8px;
    border-radius: 99px;
    gap: 5px;
}

.wd-filter-pills a {
    background: transparent !important;
    color: #111 !important;
    border: 1px solid transparent;
}

.wd-filter-pills a.is-active {
    background: #111827 !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.wd-filter-pills a:hover:not(.is-active) {
    background: rgba(255, 255, 255, 0.6) !important;
}

/* CARDS */
.wd-portfolio-hero {
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    align-items: center;
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 4px 15px -3px rgba(0, 0, 0, 0.05);
    /* Even subtler */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    margin-bottom: 24px;
    /* Tightest gap */
    cursor: pointer;
    border: 1px solid rgba(0, 0, 0, 0.02);
}

.wd-portfolio-hero:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08);
}

.wd-hero-image-side {
    position: relative;
    height: 100%;
    min-height: 240px;
    /* Ultra compact */
}

.wd-hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.wd-portfolio-hero:hover .wd-hero-img {
    transform: scale(1.02);
}

/* Content Side */
.wd-hero-content-side {
    padding: 24px 32px;
    /* Very dense padding */
}

.wd-hero-meta {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #F59E0B;
    margin-bottom: 6px;
}

.wd-hero-title {
    font-size: 1.5rem;
    /* Hero Title now matches H3/large text size */
    font-weight: 800;
    line-height: 1.1;
    color: #111;
    margin-bottom: 10px;
}

.wd-hero-desc {
    font-size: 0.9rem;
    /* Smaller dense text */
    color: #4B5563;
    line-height: 1.5;
    margin-bottom: 16px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    /* Strict 2 lines */
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.wd-chips-row {
    margin-bottom: 16px;
    display: flex;
    gap: 6px;
}

.wd-chip {
    background: #F3F4F6;
    color: #374151;
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 6px;
    letter-spacing: 0.5px;
}

/* BUTTONS */
.wd-btn-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 32px;
    border-radius: 99px;
    font-weight: 700;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    border: none;
    transition: all 0.3s ease;
}

.wd-btn-pill.primary {
    background: #111827;
    color: white;
}

.wd-btn-pill.primary:hover {
    background: linear-gradient(90deg, #111827 0%, #115E59 100%);
    box-shadow: 0 10px 20px rgba(17, 24, 39, 0.2);
    transform: translateX(5px);
}

/* GRID */
.wd-section-header {
    display: flex;
    align-items: center;
    margin-bottom: 40px;
    gap: 20px;
}

.wd-section-header h3 {
    font-size: 1.5rem;
    font-weight: 800;
    margin: 0;
    white-space: nowrap;
}

.wd-line {
    width: 100%;
    height: 1px;
    background: #E5E7EB;
}

.wd-project-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 40px;
}

.wd-grid-card {
    text-decoration: none;
    color: inherit;

}

.wd-card-image-wrap {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    aspect-ratio: 4/3;
    margin-bottom: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.wd-card-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.wd-grid-card:hover img {
    transform: scale(1.1);
}

.wd-card-pill {
    position: absolute;
    bottom: 15px;
    left: 15px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(4px);
    padding: 6px 12px;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 8px;
    color: #111;
    z-index: 2;
}

.wd-card-content h4 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #111;
    margin: 0;
}

/* MOBILE */
@media (max-width: 900px) {
    .wd-portfolio-hero {
        grid-template-columns: 1fr;
    }

    .wd-hero-image-side {
        min-height: 280px;
    }

    .wd-hero-content-side {
        padding: 40px 30px;
    }

    .wd-portfolio-filters {
        overflow-x: auto;
        justify-content: flex-start !important;
        padding-bottom: 15px;
    }

    .wd-filter-pills {
        flex-wrap: nowrap;
    }
}


/* =========================================
   14. PREMIUM PORTFOLIO ENHANCEMENTS (Solid Yellow)
   ========================================= */

/* Overwrite Defaults for Premium Feel */
.wd-portfolio-filters .wd-filter-pills {
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(10px);
    padding: 8px;
    border-radius: 99px;
    gap: 5px;
}

.wd-filter-pills a {
    background: transparent !important;
    color: #111 !important;
    border: 1px solid transparent;
}

.wd-filter-pills a.is-active {
    background: #111827 !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.wd-filter-pills a:hover:not(.is-active) {
    background: rgba(255, 255, 255, 0.6) !important;
}

/* CARDS */
.wd-portfolio-hero {
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    align-items: center;
    border-radius: 24px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 20px 60px -10px rgba(0, 0, 0, 0.08);
    /* Premium Shadow */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    margin-bottom: 80px;
}

.wd-portfolio-hero:hover {
    transform: translateY(-5px);
    box-shadow: 0 30px 70px -15px rgba(0, 0, 0, 0.12);
}

.wd-hero-image-side {
    position: relative;
    height: 100%;
    min-height: 500px;
    /* Taller Hero */
}

.wd-hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.wd-portfolio-hero:hover .wd-hero-img {
    transform: scale(1.03);
    /* Subtle Zoom */
}

.wd-hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s;
}

.wd-portfolio-hero:hover .wd-hero-overlay {
    opacity: 1;
}

/* Content Side */
.wd-hero-content-side {
    padding: 60px 50px;
}

.wd-hero-meta {
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #F59E0B;
    margin-bottom: 15px;
}

.wd-hero-title {
    font-size: 3rem;
    font-weight: 900;
    line-height: 1.05;
    color: #111;
    margin-bottom: 20px;
}

.wd-hero-desc {
    font-size: 1.1rem;
    color: #4B5563;
    line-height: 1.6;
    margin-bottom: 35px;
}

.wd-chips-row {
    margin-bottom: 25px;
}

.wd-chip {
    background: #F3F4F6;
    color: #374151;
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 6px;
    letter-spacing: 0.5px;
}

/* BUTTONS */
/* BUTTONS */
.wd-btn-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    /* Reduced padding */
    border-radius: 99px;
    font-weight: 700;
    font-size: 0.8rem;
    /* Reduced font size */
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    border: none;
    transition: all 0.3s ease;
}

.wd-btn-pill.primary {
    background: #111827;
    color: white;
}

.wd-btn-pill.primary:hover {
    background: linear-gradient(90deg, #111827 0%, #115E59 100%);
    box-shadow: 0 10px 20px rgba(17, 24, 39, 0.2);
    transform: translateX(5px);
}

/* GRID */
.wd-section-header {
    display: flex;
    align-items: center;
    margin-bottom: 40px;
    gap: 20px;
}

.wd-section-header h3 {
    font-size: 1.5rem;
    font-weight: 800;
    margin: 0;
    white-space: nowrap;
}

.wd-line {
    width: 100%;
    height: 1px;
    background: #E5E7EB;
}

.wd-project-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 40px;
}

.wd-grid-card {
    text-decoration: none;
    color: inherit;

}

.wd-card-image-wrap {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    aspect-ratio: 4/3;
    margin-bottom: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.wd-card-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.wd-grid-card:hover img {
    transform: scale(1.1);
}

.wd-card-pill {
    position: absolute;
    bottom: 15px;
    left: 15px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(4px);
    padding: 6px 12px;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 8px;
    color: #111;
    z-index: 2;
}

.wd-card-content h4 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #111;
    margin: 0;
}

/* MOBILE */
@media (max-width: 900px) {
    .wd-portfolio-hero {
        grid-template-columns: 1fr;
    }

    .wd-hero-image-side {
        min-height: 280px;
    }

    .wd-hero-content-side {
        padding: 40px 30px;
    }

    .wd-portfolio-filters {
        overflow-x: auto;
        justify-content: flex-start !important;
        padding-bottom: 15px;
    }

    .wd-filter-pills {
        flex-wrap: nowrap;
    }
}


/* Page Standard Padding Adjustment for Yellow Header */
.wd-page-standard .wd-page-content-box {
    padding-top: 80px;
    max-width: 900px;
    margin: 0 auto;
}


/* 
   15. SHOP CONSISTENCY FIXES (Product Cards)
   Ensuring Shop Cards match Portfolio Cards exactly.
*/

/* Reset Default List Styles */
.woocommerce ul.products {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Product Card Wrapper matches Portfolio .wd-grid-card */
.product-card-wrapper .wd-grid-card {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: transform 0.3s ease;
}

.product-card-wrapper .wd-card-image-wrap {
    position: relative;
    border-radius: 24px;
    /* Premium Curve */
    overflow: hidden;
    aspect-ratio: 1/1;
    /* Square like Portfolio */
    margin-bottom: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    background: #f9fafb;
    /* Loading placeholder */
}

.product-card-wrapper .wd-card-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

/* Hover Zoom */
.product-card-wrapper:hover .wd-card-image-wrap img {
    transform: scale(1.08);
}

/* Inner Pill (Category) */
.product-card-wrapper .wd-card-pill {
    position: absolute;
    bottom: 15px;
    left: 15px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(4px);
    padding: 6px 14px;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 8px;
    color: #111;
    z-index: 2;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

/* Typography */
.product-card-wrapper h4 {
    font-size: 1.1rem;
    font-weight: 800;
    color: #111827;
    margin: 0 0 4px 0;
    line-height: 1.3;
}

.product-card-wrapper .wd-price {
    font-size: 0.95rem;
    color: #4B5563;
    font-weight: 600;
}

.product-card-wrapper .wd-price ins {
    text-decoration: none;
    color: #111;
}

.product-card-wrapper .wd-price del {
    color: #9CA3AF;
    opacity: 0.7;
    font-size: 0.8em;
}

/* Ensure Grid Layout handles the list items */
.woocommerce ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px 30px;
}

@media (max-width: 1024px) {
    .woocommerce ul.products {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .woocommerce ul.products {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* =========================================
   16. FINAL SHOP FIXES (Yellow Header + Premium Cards)
   ========================================= */

/* 1. Force Yellow Header on Shop Archive */
body.woocommerce-page .wd-shop-hero,
body.post-type-archive-product .wd-shop-hero,
body.tax-product_cat .wd-shop-hero {
    background-color: #FDE047 !important;
    background-image: none !important;
}

/* Ensure Site Header is Transparent so it doesn't overlap with Teal */
body.woocommerce-page .site-header,
body.post-type-archive-product .site-header {
    background-color: transparent !important;
}

/* 2. Premium Product Cards (Match Portfolio) */
.woocommerce ul.products li.product,
.product-card-wrapper {
    background: transparent !important;
    /* Let inner card handle bg */
    border: none !important;
}

.wd-grid-card {
    display: block;
    position: relative;
    text-decoration: none;
    color: inherit;
}

.wd-card-image-wrap {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    aspect-ratio: 1/1;
    margin-bottom: 12px;
    background: #f3f4f6;
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.wd-grid-card:hover .wd-card-image-wrap {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.15);
}

.wd-card-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.wd-grid-card:hover .wd-card-image-wrap img {
    transform: scale(1.05);
}

.wd-card-pill {
    position: absolute;
    bottom: 12px;
    left: 12px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(4px);
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 0.7rem;
    font-weight: 700;
    color: #111;
    z-index: 2;
    text-transform: uppercase;
}

.wd-card-content h4 {
    font-size: 1.05rem;
    font-weight: 800;
    color: #111827;
    margin: 0 0 4px 0;
}

.wd-price {
    font-size: 0.95rem;
    font-weight: 600;
    color: #4B5563;
}

/* 3. Hide Default 'Add to Cart' buttons if they appear */
.woocommerce ul.products li.product .button {
    display: none !important;
}


/* =========================================
   17. LASER EYE POLISH (Strict Brand Colors)
   ========================================= */

/* 1. Kill the Teal Price */
.woocommerce ul.products li.product .price,
.wd-price,
.wd-price span,
.wd-price .woocommerce-Price-amount {
    color: #111827 !important;
    /* Dark Navy */
    font-weight: 700 !important;
}

/* 2. Premium Sale Badge (Navy, not Red) */
.wd-badge-sale,
.onsale {
    background-color: #111827 !important;
    /* Navy */
    color: #FFFFFF !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    padding: 4px 12px !important;
    border-radius: 99px !important;
    /* Pill shape */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important;
    top: 15px !important;
    right: 15px !important;
    line-height: 1 !important;
    min-height: auto !important;
    min-width: auto !important;
}

/* 3. Ensure Title is Navy */
.wd-card-content h4,
.woocommerce-loop-product__title {
    color: #111827 !important;
    font-family: 'Poppins', sans-serif !important;
    letter-spacing: -0.02em !important;
}

/* 4. Filter Pills (Ensure Visibility on Yellow) */
.wd-filter-pills a {
    color: #111827 !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
}

.wd-filter-pills a.is-active {
    background: #111827 !important;
    color: #fff !important;
    border-color: #111827 !important;
}

/* 5. Tweak Shadow for subtle premium feel */
.wd-card-image-wrap {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06) !important;
    /* Softer shadow */
}


/* =========================================
   18. HEADER TRANSPARENCY FIX (No White Gap)
   ========================================= */

/* Make the header overlay the hero */
body.woocommerce-page .site-header,
body.post-type-archive-product .site-header,
body.tax-product_cat .site-header {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border-bottom: none !important;
}

/* Ensure the hero sits at the very top */
body.woocommerce-page .wd-shop-hero,
body.post-type-archive-product .wd-shop-hero,
body.tax-product_cat .wd-shop-hero {
    margin-top: 0 !important;
    padding-top: 180px !important;
    /* Increase padding to account for header height */
}

/* Remove any default margin from main content wrapper */
body.woocommerce-page #primary,
body.woocommerce-page .site-content,
body.post-type-archive-product #primary {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Force the body background just in case */
body.woocommerce-page,
body.post-type-archive-product {
    background-color: #FDE047 !important;
    /* Matches Hero initially */
}


/* =========================================
   19. BLOG TRANSPARENCY FIX (Full Yellow Header)
   ========================================= */

/* 1. Header Overlay for Blog */
body.blog .site-header,
body.archive .site-header,
body.search .site-header {
    position: absolute !important;
    top: 0 !important;
    width: 100% !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

/* 2. Push Blog Hero to Top */
body.blog .wd-shop-header-group,
body.archive .wd-shop-header-group,
body.search .wd-shop-header-group {
    margin-top: 0 !important;
    padding-top: 180px !important;
    /* Visual balance */
    background-color: #FDE047 !important;
}

/* 3. Remove default margins */
body.blog #primary,
body.archive #primary {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* 4. Ensure Body Background is White (Content area) or Yellow (Header area check) */
body.blog,
body.archive {
    background-color: #2e2e2e !important;
    /* Fallback to distinguish if broken, but usually this isn't visible behind layers. Actually let's keep it white or yellow? User wants yellow header. */
    background-color: #FDE047 !important;
    /* Match header */
}

/* 5. Fix Content Container Background */
.blog-grid-container {
    position: relative;
    z-index: 5;
}


/* =========================================
   20. BLOG PREMIUM REFINEMENT
   ========================================= */

/* 1. Ensure Blog Page Background is White (Clean Canvas) */
body.blog,
body.archive,
body.search {
    background-color: #FFFFFF !important;
}

/* 2. Blog Grid Container Spacing */
.blog-grid-container {
    padding-top: 40px;
    padding-bottom: 80px;
}

/* 3. Blog Card Typography Polish */
.blog-card-wrapper .entry-title {
    transition: color 0.2s ease;
}

.wd-grid-card:hover .entry-title {
    color: #4B5563 !important;
    /* Soften on hover */
}

/* 4. Remove default underline on links */
.wd-grid-card {
    text-decoration: none !important;
}

/* 5. Mobile Responsiveness for Blog Grid */
@media (max-width: 900px) {
    .blog-grid-container {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }
}

@media (max-width: 600px) {
    .blog-grid-container {
        grid-template-columns: 1fr !important;
    }

    .wd-page-title {
        font-size: 3rem !important;
    }
}


/* =========================================
   21. PREMIUM COLOR & SPACING REFINEMENT
   ========================================= */

/* 1. SHOP: Crisp White Background for Content (Match Portfolio) */
body.woocommerce-page,
body.post-type-archive-product,
body.tax-product_cat {
    background-color: #FFFFFF !important;
    /* Content area is white */
}

/* Ensure Hero stays Yellow and sits at top */
.wd-shop-header-group,
.wd-shop-hero {
    background-color: #FDE047 !important;
    position: relative;
    z-index: 10;
}

/* 2. BLOG: Fix Teal Title and Force Navy */
.wd-page-title,
.page-title,
body.blog .wd-page-title {
    color: #111827 !important;
    /* Navy */
    text-transform: uppercase !important;
}

/* 3. BLOG: Ensure White Background */
body.blog,
body.archive {
    background-color: #FFFFFF !important;
}

/* 4. SPACING: Airier Grids */
.woocommerce ul.products,
.blog-grid-container {
    padding-top: 80px !important;
    /* More breathing room after hero */
    gap: 40px !important;
    /* Consistent Gaps */
}

/* 5. COLOR CORRECTION: Ensure all pills are Navy/White */
.wd-filter-pills a.is-active {
    background-color: #111827 !important;
    border-color: #111827 !important;
    color: #fff !important;
}

/* 6. Card Hover consistency */
.wd-grid-card:hover .wd-card-image-wrap {
    transform: translateY(-8px) scale(1.01);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12) !important;
}


/* =========================================
   22. FIX HEADER CLIPPING & FLOATING PILLS
   ========================================= */

/* 1. Allow Floating Elements (Fix Cut-off) */
.wd-shop-header-group,
.site-header {
    overflow: visible !important;
}

/* 2. Adjust Header Spacing for Float */
body.woocommerce-page .wd-shop-header-group,
body.blog .wd-shop-header-group {
    padding-bottom: 60px !important;
    /* Space for pills inside */
    margin-bottom: 0 !important;
}

/* 3. Floating Filter Container */
.wd-shop-filters,
.blog-grid-container {
    position: relative;
    z-index: 50;
    margin-top: -30px !important;
    /* Pull up to overlaps yellow/white */
}

/* 4. Ensure Pills don't get hidden */
.wd-filter-pills {
    padding-bottom: 10px !important;
    /* Shadow space */
}

/* 5. Refine Hero Top Padding again to be safe */
body.woocommerce-page .wd-shop-hero,
body.blog .wd-shop-header-group {
    padding-top: 160px !important;
}


/* =========================================
   24. FIX SPACE & CLIPPING (FINAL)
   ========================================= */

/* 1. Reduce Top Space (Issue #1) */
body.woocommerce-page .wd-shop-hero,
body.blog .wd-shop-header-group,
body.post-type-archive-product .wd-shop-hero {
    padding-top: 120px !important;
    /* Reduced from 160px for tighter feel */
}

/* 2. Fix Filter Clipping (Issue #2) */
.wd-shop-header-group {
    overflow: visible !important;
    padding-bottom: 50px !important;
    /* Give ample space for pills */
    margin-bottom: 0 !important;
}

.wd-shop-filters,
.blog-grid-container {
    margin-top: 0 !important;
    /* Reset negative margin */
    transform: translateY(25px);
    /* Push DOWN to straddle the line safely */
    z-index: 100 !important;
}

/* Fix z-index war */
.site-content,
#primary {
    position: relative;
    z-index: 10;
    background: transparent !important;
    /* Let body bg show */
}


/* =========================================
   25. FIX TOP SPACE (USER FEEDBACK)
   ========================================= */
body.woocommerce-page .wd-shop-hero,
body.blog .wd-shop-header-group,
body.post-type-archive-product .wd-shop-hero {
    padding-top: 100px !important;
    /* Reduced to 100px for matching Portfolio tight feel. */
}


/* =========================================
   26. MASTER REFINEMENT (PROMPT)
   ========================================= */

/* 1. HERO REFINEMENT */
.wd-shop-hero-text {
    max-width: 900px !important;
}

/* 2. FILTER PILLS (Master Style) */
.wd-filter-pills a {
    background: #ffffff !important;
    border: 1px solid #E5E7EB !important;
    /* Subtle border */
    color: #374151 !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.03) !important;
    font-weight: 600 !important;
}

.wd-filter-pills a:hover {
    background: #F3F4F6 !important;
    transform: translateY(-1px) !important;
}

.wd-filter-pills a.is-active {
    background: #111827 !important;
    /* Dark Navy Active */
    color: #ffffff !important;
    border-color: #111827 !important;
    box-shadow: 0 4px 12px rgba(17, 24, 39, 0.2) !important;
}

/* 3. PRODUCT CARDS (Master Style) */
.woocommerce ul.products li.product {
    border: none !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06) !important;
    /* Premium Soft Shadow */
    padding: 16px !important;
    background: #fff;
    border-radius: 20px !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

.woocommerce ul.products li.product:hover {
    transform: translateY(-8px) scale(1.005) !important;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.12) !important;
    /* Deeper lift */
    z-index: 10;
}

/* Image Wrapper */
.woocommerce ul.products li.product .wd-card-image-wrap,
.woocommerce ul.products li.product a img {
    border-radius: 16px !important;
    aspect-ratio: 1 / 1 !important;
    /* Fixed Square */
    object-fit: cover !important;
    width: 100% !important;
    margin-bottom: 12px !important;
}

/* Badge (Top Left Pill) */
.woocommerce ul.products li.product .onsale,
.wd-card-pill {
    top: 10px !important;
    left: 10px !important;
    right: auto !important;
    border-radius: 99px !important;
    padding: 6px 14px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    background: #ffffff !important;
    color: #111 !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important;
}

/* Text */
.woocommerce ul.products li.product h2.woocommerce-loop-product__title {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: #1F2937 !important;
    margin-bottom: 8px !important;
    line-height: 1.4 !important;
}

.price {
    color: #111827 !important;
    /* Dark Price */
    font-weight: 800 !important;
    font-size: 1.05rem !important;
    display: block !important;
}

/* 4. RESPONSIVE GRID (Master Style) */
@media (max-width: 1024px) {
    .woocommerce ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 600px) {
    .woocommerce ul.products {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }

    /* Horizontal Filters */
    .wd-shop-filters {
        overflow-x: auto !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    .wd-filter-pills {
        display: inline-flex !important;
        width: max-content !important;
        padding-bottom: 10px !important;
    }
}

/* 5. LOADER ANIMATION */
@keyframes wdFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* =========================================
   27. FINAL BADGE & IMAGE FIX (AUDIT)
   ========================================= */

/* 1. BADGE FIX (Prevent Distortion/Blob) */
.woocommerce ul.products li.product .onsale,
.wd-card-pill {
    position: absolute !important;
    top: 12px !important;
    left: 12px !important;
    right: auto !important;
    /* Stop stretching */
    width: auto !important;
    /* Stop stretching */
    max-width: fit-content !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 28px !important;
    min-width: 0 !important;
    /* Reset */
    padding: 6px 14px !important;
    border-radius: 99px !important;
    background: #ffffff !important;
    color: #111111 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
    z-index: 5 !important;
}

/* 2. IMAGE ASPECT RATIO (Strict Square) */
.woocommerce ul.products li.product a img,
.woocommerce ul.products li.product .wd-card-image-wrap img {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    border-radius: 16px !important;
}

.woocommerce ul.products li.product .wd-card-image-wrap {
    aspect-ratio: 1 / 1 !important;
    position: relative !important;
    overflow: hidden !important;
    border-radius: 16px !important;
    width: 100% !important;
    margin-bottom: 12px !important;
}

/* 3. CARD HOVER (Premium Lift) */
.woocommerce ul.products li.product {
    background: #fff !important;
    border-radius: 20px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06) !important;
    padding: 16px !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

.woocommerce ul.products li.product:hover {
    transform: translateY(-8px) scale(1.02) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12) !important;
    z-index: 10 !important;
}

/* 4. PRICE ALIGNMENT */
.price {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 1.1rem !important;
    color: #111 !important;
}

.price del {
    font-size: 0.9em !important;
    color: #9CA3AF !important;
    opacity: 0.7 !important;
    font-weight: 400 !important;
}

.price ins {
    text-decoration: none !important;
    font-weight: 700 !important;
    color: #111 !important;
}

/* =========================================
   11. UNIFIED HERO COMPONENT (Global)
   ========================================= */
.wd-hero--sunny {
    background-color: var(--color-bg-hero, #F7D74A);
    padding-top: calc(var(--header-height, 80px) + 24px);
    /* Tighter top */
    padding-bottom: 32px;
    /* Tighter bottom */
    margin-bottom: 0;
    /* No margin, connects to content */
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    overflow: hidden;
    align-items: flex-end;
    border-bottom: none;
}

/* Container */
.wd-hero__container {
    max-width: var(--container-max, 1280px);
    /* Consistent Width */
    margin: 0 auto;
    padding: 0 24px;
    width: 100%;
    text-align: center;
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

/* Decorative Pattern - Repositioned & Subtle */
.wd-hero__pattern {
    position: absolute;
    right: 0;
    top: 40px;
    width: 300px;
    height: 150px;
    background-image: radial-gradient(rgba(0, 0, 0, 0.07) 1px, transparent 1px);
    background-size: 24px 24px;
    opacity: 0.15;
    /* Reduced Opacity */
    z-index: 1;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to left, black, transparent);
    mask-image: linear-gradient(to left, black, transparent);
}

/* Breadcrumb - Closer & Contrast */
.wd-hero__breadcrumb {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    color: rgba(17, 24, 39, 0.75);
    /* Increased Contrast */
    margin-bottom: 8px;
    /* Closer to title */
    opacity: 1;
}

.wd-hero__breadcrumb nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.wd-hero__breadcrumb a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s;
    border-bottom: 1px solid transparent;
}

.wd-hero__breadcrumb a:hover {
    color: #111827;
    border-color: #111827;
}

.wd-hero__sep {
    color: rgba(17, 24, 39, 0.4);
}

/* Title - Portfolio Match */
.wd-hero__title {
    font-size: clamp(2.5rem, 5vw, 4rem);
    /* Balanced Size */
    font-weight: 800;
    line-height: 1.1;
    color: #111827;
    margin: 0 0 12px 0;
    /* Tighter Spacing */
    text-transform: uppercase;
    letter-spacing: -0.02em;
}

/* Subtitle - Refined */
.wd-hero__subtitle {
    font-size: 1.25rem;
    /* Slightly Larger */
    color: #4B5563;
    /* Softer Gray 600 */
    max-width: 640px;
    /* Capped Width */
    line-height: 1.6;
    margin: 0 auto;
    font-weight: 400;
}

/* Filters Area - Integrated */
.wd-hero__filters {
    margin-top: 24px;
    /* Closer to subtitle */
    width: 100%;
    display: flex;
    justify-content: center;
}

/* Filter Pills (BEM) */
.wd-filter-pills {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

.wd-filter-pills a {
    display: flex;
    align-items: center;
    height: 40px;
    /* Refined Height */
    padding: 0 24px;
    /* Balanced Padding */
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.6);
    /* Glassy/Light */
    color: #4B5563;
    border: 1px solid rgba(255, 255, 255, 0.5);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

.wd-filter-pills a:hover {
    transform: translateY(-2px);
    background: #fff;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.08);
    color: #111827;
}

.wd-filter-pills a.is-active {
    background: #111827;
    color: #ffffff;
    border-color: #111827;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .wd-hero--sunny {
        padding-top: 100px;
        /* Mobile Header offset */
        padding-bottom: 40px;
        margin-bottom: 32px;
    }

    .wd-hero__pattern {
        opacity: 0.1;
        width: 150px;
        height: 100px;
        right: -20px;
    }

    .wd-hero__title {
        font-size: 2.25rem;
    }

    .wd-hero__filters {
        justify-content: flex-start;
        overflow-x: auto;
        padding-bottom: 12px;
        padding-left: 24px;
        margin-left: -24px;
        width: calc(100% + 48px);
        -webkit-overflow-scrolling: touch;
        /* Hide scrollbar */
        scrollbar-width: none;
    }

    .wd-hero__filters::-webkit-scrollbar {
        display: none;
    }

    .wd-filter-pills {
        flex-wrap: nowrap;
        padding-right: 24px;
        width: max-content;
    }
}

/* =========================================
   15. PREMIUM HOME REFINEMENTS
   ========================================= */

/* Textured Yellow Hero */
.wd-hero-block {
    background: var(--color-bg-hero, #FDE047) !important;
    background-image: radial-gradient(circle at 10% 20%, rgb(254, 240, 138) 0%, rgb(253, 224, 71) 90%) !important;
}

/* Service Card Refresh */
.service-card {
    background: #FFFFFF;
    padding: 48px 32px !important;
    border-radius: 24px;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid rgba(0, 0, 0, 0.03) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02) !important;
}

.service-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08) !important;
    border-color: rgba(0, 0, 0, 0.05);
}

.service-icon {
    width: 80px;
    height: 80px;
    background: #F8FAFC !important;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px auto;
    font-size: 32px;
    color: var(--color-text-main);
    border: 1px solid rgba(0, 0, 0, 0.03);
}

/* Fiverr Button */
.btn-fiverr {
    font-size: 1.1rem !important;
    padding: 18px 48px !important;
    background: #111 !important;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15) !important;
}

.btn-fiverr:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2) !important;
}

/* Badge Logic */
.wd-badge-best {
    position: absolute;
    top: 12px;
    left: 12px;
    background: #FDE047;
    color: #111;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 4px;
    text-transform: uppercase;
    z-index: 2;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.wd-card-badge--category {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(4px);
    color: #6B7280;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 4px;
    z-index: 2;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

/* =========================================
   16. SOLID YELLOW SYSTEM & HEADER FIX (USER APPROVED)
   ========================================= */

/* 1. Header: White, Relative, No Overlay */
body.home .site-header {
    position: relative !important;
    background: #FFFFFF !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
    /* Soft shadow */
    padding: 20px 0 !important;
    margin: 0 !important;
    /* Kill all margins */
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 0 !important;
    /* Kill pill shape */
    top: 0 !important;
    left: 0 !important;
}

/* 2. Unified Brand Yellow (Solid #FDE047) */
/* Hero, Footer, and Newsletter share this EXACT color */
.wd-hero-block,
.site-footer,
.newsletter-section {
    background: #FDE047 !important;
    background-image: none !important;
    /* KILL GRADIENT */
}

/* 3. Hero Spacing (No padding for header) */
.wd-hero-block {
    padding-top: 100px !important;
    /* Reduced from 180px */
    padding-bottom: 100px !important;
    margin-top: 0 !important;
}

/* Mobile Hero Spacing */
@media (max-width: 960px) {
    .wd-hero-block {
        padding-top: 60px !important;
        padding-bottom: 60px !important;
    }
}

/* 4. Ensure Hero Text is Vertically Centered */
.wd-hero-block .hero-grid {
    align-items: center !important;
    min-height: auto !important;
    /* Let content dictate height */
}

/* 5. Clean Transition */
/* Ensure no white gap between header and hero */
body.home .site-content {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* =========================================
   17. FINAL STUDIO POLISH (Compact & Premium)
   ========================================= */

:root {
    /* Tighten Global Rhythm */
    --section-spacing: 80px !important;
    /* Was 110px */
}

/* 1. Global Section Spacing */
.site-main>section,
.wd-section {
    padding-top: var(--section-spacing) !important;
    padding-bottom: var(--section-spacing) !important;
}

/* 2. Tighter Section Headers */
.wd-section-header {
    margin-bottom: 40px !important;
    /* Was 60px */
    gap: 12px !important;
}

/* 3. Hero Vertical Alignment Fix */
.wd-hero-block .hero-grid {
    align-items: center !important;
    justify-content: center;
}

.hero-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Ensure text is vertically centered relative to image */
    padding-right: 40px;
}

/* 4. Product Grid Spacing */
.woocommerce ul.products {
    gap: 32px !important;
    /* Tighter grid */
    margin-bottom: 40px !important;
}

/* 5. Mobile Optimization */
@media (max-width: 768px) {
    :root {
        --section-spacing: 60px !important;
    }

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

    .wd-hero-block {
        padding-top: 40px !important;
        padding-bottom: 60px !important;
    }
}

/* Premium Card Interaction */
.woocommerce ul.products li.product {
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.woocommerce ul.products li.product:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

/* =========================================
   18. NUCLEAR WHITE SPACE FIX (Aggressive)
   ========================================= */

/* 1. Force Root Zero */
html,
body {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* 2. Kill Admin Bar Gap (If logged in, we hide the gap behavior) */
html {
    margin-top: 0 !important;
}

/* 3. Force Wrapper Zero */
#page,
.site,
.site-content {
    margin-top: 0 !important;
    padding-top: 0 !important;
    top: 0 !important;
}

/* 4. Header Reinforcement */
.site-header {
    top: 0 !important;
    margin-top: 0 !important;
}

/* 5. Mobile Specific Fix */
@media screen and (max-width: 782px) {
    html {
        margin-top: 0 !important;
    }

    body {
        margin-top: 0 !important;
    }
}

/* =========================================
   19. FINAL PREMIUM STUDIO REFACTOR (COMPACT & DENSE)
   ========================================= */

/* 1. Global Compact Spacing System */
:root {
    --section-spacing: 56px !important;
    /* Tightened from 80px */
}

/* 2. Hero Section: Tight & Connected */
.wd-hero-block {
    padding-top: 40px !important;
    padding-bottom: 60px !important;
    min-height: auto !important;
}

/* 3. Section Transitions (Zero Gap between Yellow/White) */
.site-main>section {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* 4. White Sections (Products / Services) */
.wd-section-resources,
.wd-section-services {
    padding-top: var(--section-spacing) !important;
    padding-bottom: var(--section-spacing) !important;
}

/* 5. Tighter Headers */
.wd-section-header {
    margin-bottom: 32px !important;
    /* Pull headlines closer to content */
}

/* 6. Product Grid Density */
.woocommerce ul.products {
    gap: 24px !important;
    /* Denser grid */
    margin-bottom: 32px !important;
}

.woocommerce ul.products li.product {
    padding: 24px !important;
    /* Reduced internal padding */
    margin-bottom: 0 !important;
}

/* 7. Services Grid Density */
.wd-services-grid {
    gap: 24px !important;
}

.service-card {
    padding: 32px 24px !important;
    /* Slightly more compact */
}

.service-icon {
    width: 64px !important;
    height: 64px !important;
    font-size: 28px !important;
    margin-bottom: 16px !important;
}

/* 8. Newsletter Integration */
.wd-section-newsletter {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
}

/* 9. Mobile Density (Aggressive) */
@media (max-width: 768px) {
    :root {
        --section-spacing: 40px !important;
    }

    .wd-hero-block {
        padding-top: 32px !important;
        padding-bottom: 40px !important;
    }

    .wd-section-header {
        margin-bottom: 24px !important;
    }
}

/* =========================================
   20. STRICT STUDIO POLISH (User Requested Specifics)
   ========================================= */

/* 1. Global Spacing (Strict 48px Desktop / 32px Mobile) */
:root {
    --section-spacing: 48px !important;
    /* Denser than 56px */
}

/* 2. Footer Bottom Cleanup (Replaces Inline Styles) */
.wd-footer-bottom {
    margin-top: 40px !important;
    padding-top: 24px !important;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.footer-bottom-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.copyright-text {
    color: #6B7280;
    font-size: 0.85rem;
}

.footer-legal-links {
    display: flex;
    gap: 24px;
    font-size: 0.85rem;
}

.footer-legal-links a {
    color: #6B7280;
    text-decoration: none;
}

.footer-legal-links a:hover {
    color: #111;
}

/* 3. Hero Title Wrap Logic (Since <br> was removed) */
.hero-title {
    max-width: 14ch;
    /* Forces the break naturally 'Assets & Packaging' */
    margin-left: auto;
    margin-right: auto;
}

/* 4. Tighter Mobile Hero */
@media (max-width: 768px) {
    .wd-hero-block {
        padding-top: 24px !important;
        /* Even tighter for mobile */
        padding-bottom: 32px !important;
    }

    .hero-title {
        font-size: 2.25rem !important;
        /* Scale down slightly */
    }
}

/* =========================================
   24. FINAL HEADER COLOR FIX (YELLOW)
   ========================================= */

/* User Request: "the header background should also be yellow" */

body.home .site-header {
    background-color: #FDE047 !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

/* Ensure Logo and Buttons have correct contrast on yellow */
body.home .site-header .btn-outline-nav {
    border-color: #111 !important;
    color: #111 !important;
}

body.home .main-navigation a {
    color: #111 !important;
}

body.home .wd-header-cart {
    color: #111 !important;
}

/* =========================================
   25. FINAL VISUAL POLISH (HERO & BUTTONS)
   ========================================= */

/* 1. Fix Headline Wrap */
.hero-title {
    max-width: 22ch !important;
    /* increased from 14ch to allow better 2-line balance */
    line-height: 1.1 !important;
    margin-bottom: 16px !important;
    /* Tighter to subtitle */
}

/* 2. Fix 'View Portfolio' Button */
.btn-outline-hero {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 28px;
    border: 2px solid #111827;
    /* Solid Black Border */
    color: #111827;
    font-weight: 600;
    border-radius: 9999px;
    /* Pill Shape */
    text-decoration: none;
    transition: all 0.2s ease;
    background: transparent;
}

.btn-outline-hero:hover {
    background: #111827;
    color: #FDE047;
    /* Yellow text on hover */
    transform: translateY(-2px);
}

/* 3. Ensure Buttons aligned */
.hero-actions {
    display: flex;
    gap: 16px;
    align-items: center;
    margin-top: 24px !important;
}

/* 4. Subtitle Tweak */
.hero-subtitle {
    font-size: 1.125rem;
    color: #374151;
    /* Slightly darker for contrast on yellow */
    max-width: 60ch;
    margin-bottom: 0 !important;
    /* Handled by actions margin-top */
    line-height: 1.5;
}

/* 5. Trust Text Polish */
.hero-trust {
    margin-top: 32px !important;
    font-size: 0.875rem;
    opacity: 0.8;
}

/* =========================================
   26. PRODUCT CARD REFINEMENT (STUDIO LOOK)
   ========================================= */

/* 1. Tighter Internal Spacing */
.woocommerce ul.products li.product {
    padding-bottom: 32px !important;
    text-align: center;
}

/* 2. Premium Title Typography */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 1.125rem !important;
    font-weight: 700 !important;
    margin-bottom: 4px !important;
    /* Pull price closer */
    padding-top: 16px !important;
    color: #111827;
}

/* 3. Price Polish */
.woocommerce ul.products li.product .price {
    color: #4B5563 !important;
    font-size: 0.95rem !important;
    font-weight: 500;
    margin-bottom: 24px !important;
    /* Space before button */
    display: block;
}

/* 4. 'View Product' Button Transformation (Pill) */
.woocommerce ul.products li.product .button {
    border-radius: 9999px !important;
    /* Full Pill */
    padding: 10px 24px !important;
    font-size: 0.8rem !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600 !important;
    border: 1px solid #E5E7EB;
    /* Subtle border initially */
    background: transparent;
    color: #111;
    margin-top: 0 !important;
    transition: all 0.2s ease;
}

.woocommerce ul.products li.product .button:hover {
    background: #111;
    color: #fff;
    border-color: #111;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* 5. Badge Polish (Keep them nice) */
.onsale,
.wd-badge {
    border-radius: 4px !important;
    /* Slightly softer corners */
    font-size: 0.7rem !important;
    letter-spacing: 0.05em;
}

/* =========================================
   27. FOOTER COLOR UNIFICATION (FINAL)
   ========================================= */

/* User Request: "the colors here should be unified" in footer */

/* 1. Force Unified Dark Color (#374151 - Grey 700) */
.copy-text,
.copyright-text,
.footer-legal-links a,
.footer-legal-links span {
    color: #374151 !important;
    /* Unified dark grey */
    opacity: 1 !important;
    /* Remove opacity difference */
    font-weight: 500 !important;
    text-decoration: none !important;
}

/* 2. Remove any blue link colors */
.footer-legal-links a:visited {
    color: #374151 !important;
}

.footer-legal-links a:hover {
    color: #111 !important;
    /* Slightly darker on hover */
    text-decoration: underline !important;
}

/* 3. Ensure container borders are subtle */
.wd-footer-bottom {
    border-top-color: rgba(0, 0, 0, 0.05) !important;
}

/* =========================================
   28. SHOP PAGE HEADER OVERLAP FIX
   ========================================= */

/* 
   Problem: On the Shop page, the "SHOP" title is hidden under the white header pill 
   because we removed all global top spacing.
   Solution: Add specific top padding to the Hero styling on Archive/Shop pages.
*/

body.woocommerce-page .wd-hero-block,
body.archive .wd-hero-block,
body.blog .wd-hero-block,
body.search .wd-hero-block {
    padding-top: 160px !important;
    /* Clears the header comfortably */
}

/* Ensure the header on these pages is positioned correctly to sit on top */
body.woocommerce-page .site-header,
body.archive .site-header {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    background: transparent !important;
    /* Floating Pill Look */
    box-shadow: none !important;
    border-bottom: none !important;
    z-index: 1000 !important;
}

/* Ensure the wrapper inside puts the white pill background if needed, 
   OR if the user wants the yellow background everywhere? 
   Let's stick to the visual: White Pill on Yellow. 
   So header background is transparent, but we need the pill? 
   
   Actually, the screenshot shows a WHITE PILL. 
   So we need to ensure the .wd-navbar (or container) is white.
   But if the structure is simple, let's just push the content down.
*/

/* If the background is yellow, and header is white... */
body.woocommerce-page .site-header {
    background-color: #FFFFFF !important;
    /* Make it solid white if it's a bar */
    /* OR if it is a pill... */
}

/* Let's try the simple "Push Down" approach first.
   If the header is FIXED/ABSOLUTE, we need padding.
   If the header is RELATIVE, we shouldn't need padding.
   My previous 'Nuclear' fix might have set it to relative?
   Let's force RELATIVE on Shop pages so it pushes content down naturally?
   NO, that might break the 'overlay' design if it exists.
   
   Safer: Add Padding.
*/

body.post-type-archive-product .wd-hero-block {
    padding-top: 140px !important;
}

/* =========================================
   29. SHOP PAGE PREMIUM OVERHAUL (FINAL FIX)
   ========================================= */

/* 1. SAFE HEADER STACK (Fixes Overlap Definitively) */
body.woocommerce-page .site-header,
body.archive .site-header {
    position: relative !important;
    /* Forces natural stacking (Header -> Hero) */
    background-color: #FDE047 !important;
    /* Seamless Yellow match */
    margin-bottom: 0 !important;
    top: auto !important;
}

/* 2. PREMIUM SHOP HERO */
body.woocommerce-page .wd-hero-block,
body.archive .wd-hero-block {
    padding-top: 40px !important;
    /* Standard spacing since header is relative */
    padding-bottom: 80px !important;
    margin-top: 0 !important;
    background-color: #FDE047 !important;
    /* Ensure solid yellow */
    text-align: center;
}

/* Hero Title Polish */
body.woocommerce-page .woocommerce-products-header__title,
body.archive .page-title {
    font-size: 4rem !important;
    /* Massive, Premium Scale */
    font-weight: 800 !important;
    letter-spacing: -0.03em;
    color: #111;
    margin-bottom: 16px !important;
    line-height: 1.1;
}

/* Subtitle Polish */
body.woocommerce-page .term-description p,
body.archive .taxonomy-description p {
    font-size: 1.25rem !important;
    color: #374151;
    max-width: 60ch;
    margin: 0 auto 40px auto !important;
    /* Space before filters */
}

/* 3. FILTER PILLS REFINEMENT */
.wd-filter-pills {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-top: 24px;
}

.wd-filter-pill {
    background: #FFFFFF;
    color: #111;
    padding: 10px 24px;
    border-radius: 9999px;
    /* Pill */
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    /* Soft lift */
}

.wd-filter-pill:hover,
.wd-filter-pill.active {
    background: #111;
    /* Dark active state */
    color: #FDE047;
    /* Yellow text */
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

/* 4. SHOP GRID - FORCE 4 COLUMNS (Desktop) */
@media (min-width: 1024px) {
    body.woocommerce-page ul.products {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 24px !important;
    }

    body.woocommerce-page ul.products li.product {
        width: 100% !important;
        margin: 0 !important;
    }
}

/* Mobile Tweak */
@media (max-width: 768px) {
    body.woocommerce-page .woocommerce-products-header__title {
        font-size: 2.5rem !important;
    }

    body.woocommerce-page ul.products {
        grid-template-columns: repeat(1, 1fr) !important;
        /* 1 col mobile */
    }
}

/* =========================================
   30. GLOBAL SUNNY YELLOW HEADER (ALL PAGES)
   ========================================= */

/* User Request: "the header on all pages should be sunny yellow" */

.site-header {
    background-color: #FDE047 !important;
    /* Sunny Yellow Global */
    border-bottom: none !important;
    box-shadow: none !important;
    position: relative !important;
    /* Prevent overlap globally */
    top: auto !important;
    margin-bottom: 0 !important;
}

/* Ensure Logo and Buttons have correct contrast (Dark on Yellow) */
.site-header .btn-outline-nav {
    border-color: #111 !important;
    color: #111 !important;
}

.site-header .btn-outline-nav:hover {
    background-color: #111 !important;
    color: #FDE047 !important;
}

/* Ensure Nav Links are dark */
.main-navigation a {
    color: #111 !important;
}

/* Ensure Cart Icon is dark */
.wd-header-cart {
    color: #111 !important;
}

/* Fix Hero padding globally since Header is now Relative */
/* We don't need massive padding-top anymore because the header takes up space naturally. */
/* But we need to ensure the Hero doesn't rely on 'margin-top: -header-height' */

.wd-hero-block {
    margin-top: 0 !important;
}

/* Specific Tweak for Single Product or pages that might have been white */


/* =========================================
   31. HEADER CONTAINER COLOR OVERRIDE (CRITICAL)
   ========================================= */

/* 
   Problem: The .site-header is yellow, but the inner .header-container 
   has a white background and pill shape, causing the "White Pill" look.
*/



/* Ensure the Logo Badge stands out if needed */
.logo-badge {
    background: #1F2937 !important;
    /* Keep Logo Dark/Navy? Or match? */
    /* If logo image is white, we need a dark background for the badge circle */
}

/* Ensure Logo Image is visible */


/* RETAIN RELATIVE POSITIONING FOR HEADER */
.site-header {
    position: relative !important;
    top: auto !important;
}

/* FIX SHOP PADDING (Since Header is now Relative/Flow) */
/* We successfully pushed it down, but let's reset to standard comfortable spacing */
body.woocommerce-page .wd-hero-block,
body.archive .wd-hero-block {
    padding-top: 60px !important;
    /* Standard spacing */
    margin-top: 0 !important;
}

/* =========================================
   32. REFINED MENU PILL (FINAL REQUEST)
   ========================================= */

/* User Request: "focus on the menu bar and refine it and turn it into pill" */

/* 1. Header Wrapper (Transparent to let Yellow Body show through) */
.site-header {
    background-color: transparent !important;
    position: relative !important;
    /* Or relative, depending on flow */
    padding-top: 24px !important;
    /* Space for the pill to float */
    padding-bottom: 24px !important;
    margin-bottom: 0 !important;
}

/* 2. The Pill Container */
.site-header .header-container {
    background-color: #FFFFFF !important;
    /* Clean White Pill */
    border-radius: 9999px !important;
    /* Full Pill Shape */
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08) !important;
    /* Premium Soft Shadow */

    /* Dimensions & Centering */
    width: auto !important;
    max-width: 1200px !important;
    /* Constraint width */
    margin: 0 auto !important;
    /* Center if width < 100% */
    padding: 12px 32px !important;
    /* Internal breathing room */
    border: 1px solid rgba(0, 0, 0, 0.02) !important;

    /* Flex alignment */
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

/* 3. Refined Internal Spacing */
.logo-badge {
    margin-right: 40px !important;
}

.main-navigation {
    flex-grow: 1;
    /* Push navigation to fill space or center? */
    display: flex;
    justify-content: center;
    /* Center links in the pill */
}

.header-actions {
    margin-left: 40px !important;
}

/* 4. Refined Link Styling inside Pill */
.main-navigation a {
    color: #111827 !important;
    font-weight: 500 !important;
    font-size: 0.95rem !important;
    padding: 8px 16px !important;
    transition: color 0.2s ease;
}

.main-navigation a:hover {
    color: #FDE047 !important;
    /* Yellow hover hint */
    /* Maybe a small background pill on hover? */
    /* background: #111; border-radius: 20px; */
}

/* 5. Mobile Adjustments */
@media (max-width: 960px) {
    .site-header {
        padding: 16px !important;
    }

    .site-header .header-container {
        padding: 12px 20px !important;
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 16px !important;
        /* Softer pill on mobile */
    }

    .main-navigation {
        display: none;
        /* Hidden on mobile */
    }
}

/* =========================================
   33. GLOBAL YELLOW HEADER BACKDROP (PILL FIX)
   ========================================= */

/* 
   Problem: The Pill is great, but because the header is 'relative', 
   the space 'behind/around' the pill is showing the default body color (White).
   Solution: Color the .site-header container Yellow (#FDE047).
   Result: A Yellow Bar containing a White Floating Pill. 
           The Yellow Bar merges with the Yellow Hero.
*/

.site-header {
    background-color: #FDE047 !important;
    /* The 'Back' of the menu */
    position: relative !important;
    /* Keep overlap fix */
}

/* Ensure the Pill itself remains White */
.site-header .header-container {
    background-color: #FFFFFF !important;
    /* Maintain Pill Styling from previous block */
    border-radius: 9999px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08) !important;
}

/* Fix Hero Spacing if double-yellow is an issue? 
   No, Yellow on Yellow is invisible. It just looks like more space. 
   We might want to reduce the Shop Hero padding slightly if the Header is now a "Bar".
*/

body.woocommerce-page .wd-hero-block,
body.archive .wd-hero-block {
    padding-top: 40px !important;
    /* Reduced from 160px/60px to nice standard */
    /* Because Header is Relative, it takes up its own space (~100px) */
}

/* =========================================
   34. BLOG & ARCHIVE HERO COLOR FIX
   ========================================= */

/* Use Request: "the blog page hero doesnt have sunny yellow" */

/* Target Blog Index (body.blog), Categories, Tags, Authors, Search results */
body.blog .wd-hero-block,
body.archive .wd-hero-block,
body.category .wd-hero-block,
body.tag .wd-hero-block,
body.author .wd-hero-block,
body.search .wd-hero-block,
body.single-post .wd-hero-block {
    /* Optional: Single posts too? User said "Blog page", implying index, but consistency is key */
    background-color: #FDE047 !important;
    color: #111111 !important;
    /* Ensure text is dark and readable */
    border-bottom: none !important;
}

/* Ensure Titles are dark on Yellow */
body.blog .page-title,
body.archive .page-title,
body.search .page-title {
    color: #111111 !important;
    font-weight: 800 !important;
}

/* Ensure Subtitles are dark grey */
body.blog .taxonomy-description,
body.archive .taxonomy-description {
    color: #374151 !important;
}

/* Fix Header Overlap if needed (should be covered by Global Relative, but just in case) */
body.blog .site-header,
body.archive .site-header {
    background-color: #FDE047 !important;
    /* Ensure Header is Yellow too */
}

/* =========================================
   35. BLOG PAGE TITLE BACKGROUND FIX (FINAL)
   ========================================= */

/* 
   Problem: The "Details" area (Title/Description) on the Blog page is still white.
   Solution: Force the container holding the title to be #FDE047.
*/

/* Target the specific header wrapper on Blog/Archives */
body.blog .page-header,
body.archive .page-header,
body.search .page-header,
body.blog header.entry-header {
    background-color: #FDE047 !important;
    padding-top: 40px !important;
    /* Add space below the menu pill */
    padding-bottom: 60px !important;
    /* Space before grid */
    margin-top: 0 !important;
    /* Connect to menu bar */
    border-bottom: none !important;
    text-align: center !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Ensure the text inside is Dark */
body.blog .page-title,
body.archive .page-title {
    color: #111111 !important;
    font-size: 4rem !important;
    /* Match Shop Title Size */
    font-weight: 800 !important;
    margin-bottom: 16px !important;
}

body.blog .taxonomy-description,
body.archive .taxonomy-description {
    color: #374151 !important;
    font-size: 1.125rem !important;
    max-width: 600px;
    margin: 0 auto !important;
}

/* Ensure the main container doesn't force white */
body.blog .site-content,
body.archive .site-content {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Fix for any potential gap between Header and Page Title */
body.blog .site-header,
body.archive .site-header {
    margin-bottom: 0 !important;
}

/* =========================================
   36. FULL BLEED HERO FIX (BLOG/ARCHIVES)
   ========================================= */

/* 
   Problem: The Blog Hero text area has white space on left/right 
   because it is inside a constrained container (e.g. .site or .container).
   Solution: Force the .wd-hero--sunny element to break out to full viewport width.
*/

/* Target the specific hero component on Blog/Archives */
body.blog .wd-hero--sunny,
body.archive .wd-hero--sunny,
body.search .wd-hero--sunny {
    width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    padding-left: 0 !important;
    /* Reset, handle inner container */
    padding-right: 0 !important;
    background-color: #FDE047 !important;
    /* Ensure Yellow */
    margin-top: -20px !important;
    /* Pull up to touch header if needed */
}

/* Ensure the inner container stays centered */
.wd-hero--sunny .wd-hero__container {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 24px !important;
    /* Breathing room */
    text-align: center !important;
}

/* Hide horizontal scrollbar just in case (Global) */
body,
html {
    overflow-x: hidden !important;
}

/* Fix Blog Title Background if it was using .page-header */
/* Since we know it uses .wd-hero--sunny now (from index.php), 
   we can ensure that specific element is yellow. */

/* Also, ensure the previous fix for .page-header doesn't conflict. 
   If index.php uses .wd-hero--sunny, then .page-header might be hidden or empty.
   But hero-sunny.php generates the title. So this is the primary element.
*/
/* =========================================
   37. UNIVERSAL HERO POLISH (BLOG/SHOP/PORTFOLIO)
   ========================================= */

/* User Request: "do the same for blog page refine everything" (Match Shop/Portfolio) */

/* 1. UNIVERSAL HERO TYPOGRAPHY */
/* Target the shared component classes found in hero-sunny.php */

.wd-hero--sunny .wd-hero__title,
.page-title,
.woocommerce-products-header__title {
    font-size: 4rem !important;
    /* Massive Premium Size */
    font-weight: 800 !important;
    letter-spacing: -0.03em !important;
    color: #111111 !important;
    line-height: 1.1 !important;
    margin-bottom: 24px !important;
    text-transform: uppercase !important;
    /* Optional: Studio feel? Shop was uppercase */
}

/* Mobile Responsive Type */
@media (max-width: 768px) {

    .wd-hero--sunny .wd-hero__title,
    .page-title,
    .woocommerce-products-header__title {
        font-size: 2.5rem !important;
    }
}

/* 2. REFINED SUBTITLES */
.wd-hero--sunny .wd-hero__subtitle,
.term-description p,
.taxonomy-description p {
    font-size: 1.25rem !important;
    color: #374151 !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
    max-width: 60ch !important;
    margin: 0 auto 40px auto !important;
    /* Center and space */
}

/* 3. UNIVERSAL FILTER PILLS (Ensure Blog gets the love) */
.wd-filter-pills {
    display: inline-flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

.wd-filter-pills li {
    margin: 0 !important;
    padding: 0 !important;
}

.wd-filter-pills a {
    display: inline-block !important;
    background: #FFFFFF !important;
    color: #111111 !important;
    padding: 12px 28px !important;
    border-radius: 9999px !important;
    /* Clean White Pill */
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
    border: 1px solid rgba(0, 0, 0, 0.02) !important;
}

.wd-filter-pills a:hover,
.wd-filter-pills a.is-active {
    background: #111111 !important;
    color: #FDE047 !important;
    /* Yellow text on dark */
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12) !important;
}

/* 4. ENSURE FULL BLEED CONTINUITY (Blog Specific Check) */
/* The previous Full Bleed Fix (36) handles the width. 
   This block handles the CONTENT Styling. */
/* =========================================
   38. BLOG GRID & CARD POLISH (PREMIUM REFINEMENT)
   ========================================= */

/* User Request: "refine everything" on Blog to match Shop quality */

/* 1. BLOG GRID LAYOUT */
.blog-grid-container {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    /* 3 Columns Layout */
    gap: 32px !important;
    padding: 0 20px !important;
    max-width: 1280px !important;
    margin: 0 auto !important;
}

/* Mobile Responsive Blog Grid */
@media (max-width: 1024px) {
    .blog-grid-container {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 640px) {
    .blog-grid-container {
        grid-template-columns: 1fr !important;
    }
}

/* 2. PREMIUM BLOG CARD STYLING */
.wd-blog-card-wrapper {
    margin-bottom: 0 !important;
}

.wd-blog-card {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    background: #FFFFFF !important;
    border-radius: 16px !important;
    /* Premium Roundness */
    overflow: hidden !important;
    border: 1px solid rgba(0, 0, 0, 0.04) !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02) !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}

.wd-blog-card:hover {
    transform: translateY(-8px) !important;
    /* Significant Lift */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
}

/* Image Area */
.wd-card-image {
    position: relative !important;
    aspect-ratio: 4/3 !important;
    /* Standard Card Ratio */
    overflow: hidden !important;
    background-color: #f3f4f6;
}

.wd-card-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.5s ease;
}

.wd-blog-card:hover .wd-card-image img {
    transform: scale(1.05) !important;
    /* Subtle Zoom */
}

/* Badge */
.wd-card-badge {
    position: absolute !important;
    top: 16px !important;
    left: 16px !important;
    background: #FFFFFF !important;
    color: #111 !important;
    padding: 6px 14px !important;
    border-radius: 9999px !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    text-transform: uppercase;
}

/* Content Area */
.wd-card-content {
    padding: 24px !important;
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
}

.wd-card-date {
    font-size: 0.75rem !important;
    color: #6B7280 !important;
    /* Grey 500 */
    margin-bottom: 12px !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

.wd-card-title {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: #111 !important;
    margin-bottom: 12px !important;
    line-height: 1.4 !important;
}

.wd-card-excerpt {
    font-size: 0.95rem !important;
    color: #374151 !important;
    line-height: 1.6 !important;
    margin-bottom: 24px !important;
    flex-grow: 1 !important;
}

/* "Read Article" Button (Pill Style) */
.wd-card-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 24px !important;
    background: transparent !important;
    border: 2px solid #111 !important;
    border-radius: 9999px !important;
    /* Pill */
    color: #111 !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    transition: all 0.2s ease !important;
    width: 100% !important;
    /* Full width button in card? or auto? Let's go full width */
}

.wd-blog-card:hover .wd-card-link {
    background: #111 !important;
    color: #FDE047 !important;
    /* Yellow text on hover */
}

.wd-read-arrow {
    display: none !important;
    /* Hide arrow for cleaner pill look */
}

/* =========================================
   39. BLOG HERO FULL SCREEN FIX (AGGRESSIVE)
   ========================================= */

/* 
   Problem: The Blog Hero is trapped inside the #page container.
   Solution: Force it to break out using viewport units, and ensure parents allow overflow.
*/

/* 1. Allow Breakout */
body.blog #page,
body.blog .site,
body.archive #page,
body.archive .site {
    overflow-x: hidden !important;
    /* Hide horizontal scroll from breakout */
    overflow-y: visible !important;
    /* Allow vertical flow */
    width: 100% !important;
    max-width: 100% !important;
}

/* 2. Force Hero to 100vw */
body.blog .wd-hero--sunny,
body.archive .wd-hero--sunny,
body.blog .page-header,
body.archive .page-header,
body.search .page-header {
    width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;

    /* Ensure styles match Shop */
    background-color: #FDE047 !important;
    padding-top: 80px !important;
    /* Space for the floating pill */
    padding-bottom: 80px !important;
    margin-top: 0 !important;
    text-align: center !important;
}

/* 3. Ensure Content is Centered */
.wd-hero--sunny .wd-hero__container,
.page-header .wd-hero__container {
    max-width: 1280px !important;
    margin: 0 auto !important;
    padding: 0 24px !important;
}

/* 4. Nuclear Option: If #post-X wrappers are involved */
body.blog .site-content,
body.archive .site-content {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
}

/* =========================================
   40. UNIVERSAL LAYOUT & HERO STANDARDIZATION (FINAL)
   ========================================= */

/* 
   User Request: "blog page hero doesnt look same and consitent as other pages"
   Solution: Enforce identical layout rules for #page, Heroes, and Typography globally. 
   Stop treating pages differently.
*/

/* 1. LAYOUT ROOT STANDARDIZATION */
/* Force the main wrapper to ALWAYS be full width, allowing inner full-bleed. */
#page,
.site {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 2. UNIVERSAL HERO CONSISTENCY */
/* Apply exact same specs to every sunny hero variant */
.wd-hero--sunny,
body.blog .page-header,
body.archive .page-header {
    width: 100% !important;
    /* Now that #page is 100%, we don't need 100vw hack unless nested deep */
    max-width: 100% !important;
    background-color: #FDE047 !important;
    padding-top: 60px !important;
    /* Standard Comfort Spacing */
    padding-bottom: 80px !important;
    text-align: center !important;
    margin-top: 0 !important;
    /* Reset any previous hacks if #page is fixed */
    left: auto !important;
    right: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* 3. HERO TYPOGRAPHY (IDENTICAL ANYWHERE) */
.wd-hero--sunny .wd-hero__title,
.page-title,
.woocommerce-products-header__title {
    font-size: 4rem !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    color: #111111 !important;
    margin-bottom: 20px !important;
    text-transform: uppercase !important;
}

/* 4. SUBTITLE CONSISTENCY */
.wd-hero--sunny .wd-hero__subtitle,
.term-description p,
.taxonomy-description p {
    font-size: 1.25rem !important;
    color: #374151 !important;
    max-width: 60ch !important;
    margin: 0 auto 40px auto !important;
    font-weight: 400 !important;
}

/* 5. FILTER PILLS CONSISTENCY */
.wd-filter-pills a {
    background: #FFFFFF !important;
    color: #111111 !important;
    padding: 10px 24px !important;
    border-radius: 9999px !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05) !important;
}

.wd-filter-pills a:hover {
    background: #111111 !important;
    color: #FDE047 !important;
}

/* 6. CONTENT CONTAINER STANDARDIZATION */
/* Ensure the content AFTER the hero is centered and constrained */
body.blog .site-content,
body.archive .site-content,
body.woocommerce-page .site-content {
    max-width: 1280px !important;
    margin: 0 auto !important;
    padding: 0 24px !important;
    width: 100% !important;
}

/* 7. CLEANUP HEADER */
.site-header {
    background-color: #FDE047 !important;
    /* Match Body/Hero */
    border-bottom: none !important;
    position: relative !important;
}

/* 8. MOBILE ADJUSTMENTS */
@media (max-width: 768px) {

    .wd-hero--sunny .wd-hero__title,
    .page-title {
        font-size: 2.5rem !important;
    }
}

/* =========================================
   41. FINAL MENU CONTENT POLISH (HARDCODED)
   ========================================= */

/* Ensure the hardcoded list behaves like a flex row */
.main-navigation ul {
    display: flex !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 8px !important;
    /* Space between links */
}

.main-navigation li {
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
}

/* Specific Link Tweaks for the 'Best Order' */
.main-navigation a {
    text-transform: uppercase !important;
    font-size: 0.85rem !important;
    /* Slightly smaller, more premium */
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    color: #111111 !important;
}

/* Active State Handling (Manual Logic or JS? Manual is hard with static HTML)
   - Since links are static, we won't have 'current-menu-item' class auto-added.
   - We can accept this tradeoff for the "Best Order" request, or add JS to highlight.
   - Simple JS snippet in footer could highlight based on URL.
   
   Visual: Let's rely on hover for now.
*/

.main-navigation a:hover {
    color: #FDE047 !important;
    background: #111 !important;
    /* Pill background on hover */
    border-radius: 9999px !important;
}

/* =========================================
   42. STICKY HEADER (MENU PILL SCROLL)
   ========================================= */

/* Use Request: "on scroll the menu pill bar should go down also" */

.site-header {
    position: sticky !important;
    /* Sticks to viewport, keeps layout space (safe) */
    top: 0 !important;
    /* Stick to the very top */
    z-index: 9999 !important;
    /* Always on top */
    width: 100% !important;

    /* Ensure the Yellow Background travels with it */
    background-color: #FDE047 !important;

    /* Optional: Transition for smooth effect if we were using JS, 
       but for raw sticky it's instant. */
}

/* Ensure no weird gaps above it */
html {
    scroll-padding-top: 140px;
    /* Good for anchor links */
}

/* Ensure it doesn't get covered by WP Admin Bar if logged in */
body.admin-bar .site-header {
    top: 32px !important;
}

@media (max-width: 782px) {
    body.admin-bar .site-header {
        top: 46px !important;
    }
}

/* =========================================
   43. SINGLE PRODUCT PAGE REFINEMENT (STUDIO PREMIUM)
   ========================================= */

/* User Request: "refine the single product page to fit the overall theme" */

/* 1. HERO INTEGRATION (Make it Sunny) */
.wd-minimal-header {
    background-color: #FDE047 !important;
    /* Seamless match with Sticky Header */
    padding-top: 140px !important;
    /* Clear sticky header */
    padding-bottom: 60px !important;
    text-align: center !important;
    border-bottom: none !important;
}

.wd-minimal-title {
    font-size: 3rem !important;
    /* Slightly smaller than Shop 4rem, but big */
    font-weight: 800 !important;
    text-transform: uppercase !important;
    margin-bottom: 0 !important;
    letter-spacing: -0.02em !important;
}

.wd-minimal-crumb {
    color: #374151 !important;
    font-weight: 600 !important;
    margin-bottom: 20px !important;
    opacity: 0.8 !important;
}

/* 2. MAIN CONTAINER LAYOUT */
.wd-single-product-container {
    max-width: 1280px !important;
    margin: 60px auto !important;
    padding: 0 24px !important;
}

/* 3. HERO GRID (Gallery vs BuyBox) */
.wd-product-hero-grid {
    display: grid !important;
    grid-template-columns: 1.2fr 0.8fr !important;
    /* 60/40 Split */
    gap: 60px !important;
    align-items: start !important;
}

@media (max-width: 1024px) {
    .wd-product-hero-grid {
        grid-template-columns: 1fr !important;
        /* Stack on Tablet/Mobile */
        gap: 40px !important;
    }
}

/* 4. GALLERY REFINEMENT */
.wd-card-image,
/* Blog check */
.wd-gallery-container,
.wd-main-image-slide {
    border-radius: 20px !important;
    /* Premium Smooth Radius */
    overflow: hidden !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
    /* Soft Shadow */
}

.wd-main-image-slide img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
}

.wd-gallery-thumb-item {
    border-radius: 12px !important;
    overflow: hidden !important;
    cursor: pointer !important;
    opacity: 0.7 !important;
    transition: all 0.2s ease !important;
    border: 2px solid transparent !important;
}

.wd-gallery-thumb-item.active,
.wd-gallery-thumb-item:hover {
    opacity: 1 !important;
    border-color: #FDE047 !important;
    /* Yellow active ring */
    transform: translateY(-2px);
}

/* 5. BUY BOX CARD (Sticky) */
.wd-sticky-buy-box-card {
    background: #FFFFFF !important;
    padding: 40px !important;
    border-radius: 24px !important;
    /* Large Radius */
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08) !important;
    /* Floating Card Effect */
    border: 1px solid rgba(0, 0, 0, 0.03) !important;
    position: sticky !important;
    top: 140px !important;
    /* Below sticky header */
}

/* Price */
.wd-price-hero,
.wd-price-hero span {
    font-size: 2.5rem !important;
    font-weight: 800 !important;
    color: #111 !important;
    margin-bottom: 20px !important;
    letter-spacing: -0.02em !important;
    display: block !important;
}

/* Short Desc */
.wd-short-description-clean {
    font-size: 1.1rem !important;
    color: #4B5563 !important;
    line-height: 1.6 !important;
    margin-bottom: 32px !important;
}

/* 6. BUTTONS (PILL STYLE) */
.wd-prime-buy-btn,
.single_add_to_cart_button {
    display: flex !important;
    width: 100% !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 18px 32px !important;
    background-color: #111111 !important;
    /* Solid Black */
    color: #FFFFFF !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    border-radius: 9999px !important;
    /* Full Pill */
    border: 2px solid #111111 !important;
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
    margin-bottom: 16px !important;
    text-decoration: none !important;
}

.wd-prime-buy-btn:hover,
.single_add_to_cart_button:hover {
    background-color: #FDE047 !important;
    /* Yellow Hover */
    color: #111111 !important;
    border-color: #FDE047 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 20px rgba(253, 224, 71, 0.3) !important;
}

/* Secondary Button (Add to Cart override if needed) */
/* If using both, maybe style the second one as an outline? */
/* Assuming prime is "Buy Now" and secondary is "Add to Cart" */

/* 7. TRUST BADGES */
.wd-trust-text {
    font-size: 0.85rem !important;
    color: #6B7280 !important;
    margin-bottom: 12px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

/* 8. SECTIONS (Why Choose, FAQ) */
.wd-section-card {
    background: #fff !important;
    border-radius: 16px !important;
    padding: 40px !important;
    margin-bottom: 40px !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02) !important;
}

.wd-section-title-card {
    font-size: 1.75rem !important;
    font-weight: 800 !important;
    margin-bottom: 30px !important;
}

/* 9. TABS POLISH */
.wc-tabs {
    display: flex !important;
    gap: 30px !important;
    border-bottom: 2px solid #f3f4f6 !important;
    padding: 0 !important;
    margin-bottom: 30px !important;
}

.wc-tabs li {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}

.wc-tabs li a {
    padding: 0 0 16px 0 !important;
    font-weight: 600 !important;
    color: #9CA3AF !important;
    border-bottom: 2px solid transparent !important;
    display: block !important;
    margin-bottom: -2px !important;
    /* Overlap border */
}

.wc-tabs li.active a {
    color: #111 !important;
    border-bottom-color: #FDE047 !important;
    /* Yellow Active Underline */
}

/* =========================================
   44. SINGLE PRODUCT FINAL POLISH (UNIQUE WHITETHEME)
   ========================================= */

/* User Request: "no need for the hero yellow sunny on this page... consistent and unique... premium" */

/* 1. HERO - CLEAN WHITE MINIMALIST */
.wd-minimal-header {
    background-color: #FFFFFF !important;
    /* Switch back to White */
    padding-top: 120px !important;
    /* Space for Sticky Menu */
    padding-bottom: 40px !important;
    text-align: center !important;
    border-bottom: 1px solid #f3f4f6 !important;
    /* Subtle separator */
}

/* Ensure the title is "Shop" quality but Local */
.wd-minimal-title {
    font-size: 3.5rem !important;
    font-weight: 800 !important;
    color: #111 !important;
    letter-spacing: -0.03em !important;
    margin-bottom: 8px !important;
    text-transform: uppercase !important;
}

.wd-minimal-crumb {
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    color: #9CA3AF !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
}

/* 2. PAGE BACKGROUND - SUBTLE DEPTH */
/* Make the product details area stand out by adding a very light gray backdrop to the container wrapper? 
   Or just keep it white for "clean". let's go with Clean White but make the Buy Box pop. */
.wd-single-product-layout {
    background-color: #FAFAFA !important;
    /* Super light gray premium background */
}

.wd-single-product-container {
    max-width: 1320px !important;
    /* Wider canvas */
    padding: 0 40px !important;
    margin-top: 60px !important;
}

/* 3. GALLERY - "FRAMELESS" LOOK */
.wd-gallery-container {
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

.wd-main-image-slide {
    border-radius: 24px !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.06) !important;
    /* Premium Soft Shadow */
    overflow: hidden !important;
    background: #fff !important;
}

/* 4. BUY BOX - THE "FLOATING WIDGET" */
.wd-sticky-buy-box-card {
    background: #FFFFFF !important;
    padding: 48px !important;
    /* Generous breathing room */
    border-radius: 32px !important;
    /* Super round, modern */
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.08) !important;
    /* Deep "Float" Shadow */
    border: 1px solid #ffffff !important;
    position: sticky !important;
    top: 140px !important;
}

/* 5. TYPOGRAPHY & ELEMENTS */
.wd-price-hero {
    font-size: 3rem !important;
    /* Massive Price */
    color: #111 !important;
}

.wd-short-description-clean {
    font-size: 1.15rem !important;
    color: #4B5563 !important;
    line-height: 1.7 !important;
}

/* 6. BUTTON - "STATEMENT PIECE" */
.wd-prime-buy-btn {
    background: #111 !important;
    color: #fff !important;
    height: 64px !important;
    /* Taller, more substantial */
    font-size: 1.1rem !important;
    letter-spacing: 0.05em !important;
    border-radius: 16px !important;
    /* Slightly squarer than pill? Or stick to pill. Let's do Pill. */
    border-radius: 9999px !important;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15) !important;
}

.wd-prime-buy-btn:hover {
    background: #FDE047 !important;
    color: #111 !important;
    box-shadow: 0 15px 30px rgba(253, 224, 71, 0.4) !important;
    transform: translateY(-3px) !important;
}

/* 7. TRUST & META */
.wd-trust-badge-container {
    margin-top: 32px !important;
    padding-top: 24px !important;
    border-top: 1px solid #f3f4f6 !important;
}

/* 8. SECTIONS BELOW (Tabs, etc) */
/* Make them blend into the gray background by being white cards */
.wd-section-card {
    border-radius: 24px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03) !important;
    border: none !important;
}

/* =========================================
   45. GLOBAL MENU HOVER POLISH (FIX HOME)
   ========================================= */

/* User Request: "home page elements on hover do not hover the same color... revise... to look the same" */

/* 1. FORCE MAIN NAV LINKS (Hover = Black Pill + Yellow Text) */
body .site-header .main-navigation ul li a:hover,
body.home .site-header .main-navigation ul li a:hover,
.main-navigation a:hover {
    background-color: #111111 !important;
    color: #FDE047 !important;
    border-radius: 9999px !important;
    text-decoration: none !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    opacity: 1 !important;
}

/* 2. FORCE "HIRE ME" (Outline -> Solid) */
body .site-header .header-actions .btn-outline-nav:hover,
body.home .site-header .header-actions .btn-outline-nav:hover {
    background-color: #111111 !important;
    color: #FDE047 !important;
    border-color: #111111 !important;
    transform: translateY(-2px) !important;
}

/* 3. FORCE "GET ALL ACCESS" (Black -> Yellow) */
body .site-header .header-actions .btn-bundle:hover,
body.home .site-header .header-actions .btn-bundle:hover {
    background-color: #FDE047 !important;
    color: #111111 !important;
    border-color: #FDE047 !important;
    box-shadow: 0 10px 20px rgba(253, 224, 71, 0.4) !important;
}

/* 4. CART ICON HOVER */
body .wd-header-cart:hover,
body.home .wd-header-cart:hover {
    color: #111111 !important;
    transform: scale(1.1) !important;
}

/* =========================================
   46. SINGLE PRODUCT COMPACT REFINEMENT (ELEGANT)
   ========================================= */

/* User Request: "elements of the single product to be small... premium feeling and high converting" */

/* 1. COMPACT HERO TYPOGRAPHY */
/* Make it crisp and elegant, not massive */
.wd-minimal-title {
    font-size: 2.25rem !important;
    /* Reduced from 3.5rem */
    letter-spacing: -0.01em !important;
    margin-bottom: 4px !important;
    color: #111 !important;
    line-height: 1.2 !important;
}

.wd-minimal-crumb {
    font-size: 0.75rem !important;
    letter-spacing: 0.1em !important;
    /* Airier */
    margin-bottom: 12px !important;
    opacity: 0.6 !important;
}

/* 2. REFINED BUY BOX (Tighter, Floating) */
.wd-sticky-buy-box-card {
    padding: 32px !important;
    /* Reduced from 48px */
    border-radius: 20px !important;
    /* Slightly tighter radius */
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.06) !important;
    /* Softer shadow */
    top: 120px !important;
}

/* 3. ELEGANT PRICE */
.wd-price-hero {
    font-size: 2rem !important;
    /* Reduced from 3rem */
    margin-bottom: 16px !important;
    color: #111 !important;
}

/* 4. HIGH CONVERTING COMPACT BUTTONS */
/* "Small" but punchy */
.wd-prime-buy-btn,
.single_add_to_cart_button {
    height: 52px !important;
    /* Reduced from 64px */
    padding: 0 24px !important;
    font-size: 0.9rem !important;
    letter-spacing: 0.05em !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
    border-radius: 9999px !important;
}

.wd-prime-buy-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(253, 224, 71, 0.3) !important;
}

/* 5. REFINED DESCRIPTION */
.wd-short-description-clean {
    font-size: 0.95rem !important;
    /* Crisp reading size */
    line-height: 1.65 !important;
    margin-bottom: 24px !important;
    color: #555 !important;
}

/* 6. SUBTLE TRUST BADGES */
.wd-trust-badge-container {
    margin-top: 24px !important;
    padding-top: 20px !important;
}

.wd-trust-text {
    font-size: 0.75rem !important;
    /* Smaller, trustworthy */
}

.payment-icon {
    height: 20px !important;
    /* Smaller icons */
    width: auto !important;
}

/* 7. GALLERY REFINEMENT */
.wd-main-image-slide {
    border-radius: 16px !important;
    /* Matches Buy Box */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04) !important;
}

/* 8. SECTIONS POLISH */
.wd-section-card {
    padding: 32px !important;
    border-radius: 16px !important;
    margin-bottom: 30px !important;
}

.wd-section-title-card {
    font-size: 1.25rem !important;
    /* Reduced heading size */
    margin-bottom: 20px !important;
}

/* =========================================
   47. SINGLE PRODUCT ULTIMATE (NO BOXES / HIGH CONVERT)
   ========================================= */

/* User Request: "no repeat boxes... smaller gallery... high converting... fit overall theme" */

/* 1. FLATTEN THE PAGE (No Background Grey) */
.wd-single-product-layout {
    background-color: #FFFFFF !important;
}

.wd-single-product-container {
    max-width: 1240px !important;
    /* Slightly tighter focus */
    margin-top: 40px !important;
    padding: 0 40px !important;
}

/* 2. REMOVE "REPEAT BOXES" FROM SECTIONS */
/* Only the buy box should be a card. Everything else is clean content. */
.wd-section-card {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 40px 0 !important;
    border-bottom: 1px solid #f3f4f6 !important;
    /* Divider line instead of box */
    margin-bottom: 0 !important;
}

.wd-faq-card {
    border-bottom: none !important;
    /* Last one clean */
}

/* 3. FOCUS THE BUY BOX (The Only Card) */
.wd-sticky-buy-box-card {
    background: #FFFFFF !important;
    padding: 32px 40px !important;
    border-radius: 12px !important;
    /* Crisp & Premium (Not too bubble-like) */
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08) !important;
    border: 1px solid rgba(0, 0, 0, 0.04) !important;
    border-top: 4px solid #FDE047 !important;
    /* "Fit Overall Theme" Accent */
    position: sticky !important;
    top: 130px !important;
    z-index: 10 !important;
}

/* 4. SMALLER GALLERY (40/60 Split) */
.wd-product-hero-grid {
    grid-template-columns: 42% 58% !important;
    /* Gallery takes less space */
    gap: 60px !important;
    /* More breathing room */
}

.wd-main-image-slide {
    width: 65% !important;
    /* Visual limitation? No, stick to grid */
    /* Wait, user wants "Smaller Gallery" overall visual weight */
    /* Let's try controlling aspect ratio or width inside the column */
}

/* Actually, let's keep grid 42% but ensure image doesn't scale infinitely */
@media (min-width: 1024px) {
    .wd-col-gallery {
        /* Intentionally smaller */
        max-width: 500px !important;
    }
}

.wd-main-image-slide {
    border-radius: 12px !important;
    /* Match Buy Box */
    box-shadow: none !important;
    /* Clean, no shadow on image for "Editorial" look */
    border: 1px solid #f3f4f6 !important;
}

.wd-gallery-thumb-item {
    border-radius: 8px !important;
}

/* 5. TYPOGRAPHY RE-BALANCE */
/* High Converting = Clear Hierarchy */
.wd-price-hero {
    font-size: 2.5rem !important;
    font-weight: 800 !important;
    color: #111 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

/* Add "Best Value" indicator via CSS helper? */
.wd-price-hero::after {
    content: "Premium License";
    font-size: 0.75rem;
    background: #F8FAFC;
    color: #64748B;
    padding: 6px 12px;
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border: 1px solid #e2e8f0;
}

/* 6. HIGH CONVERTING BUTTONS */
.wd-prime-buy-btn {
    background: #111 !important;
    color: #FDE047 !important;
    /* Immediate Yellow Text for Contrast */
    font-weight: 700 !important;
    border-radius: 8px !important;
    /* Slightly squarer for "Digital Product" feel */
    height: 56px !important;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1) !important;
}

.wd-prime-buy-btn:hover {
    background: #FDE047 !important;
    color: #111 !important;
    transform: translateY(-2px) !important;
}

/* 7. VALUE STRIP (High Converting) */
.wd-trust-badge-container {
    background: #F8FAFC !important;
    padding: 16px !important;
    border-radius: 8px !important;
    text-align: center !important;
    margin-top: 20px !important;
}

.wd-trust-text {
    justify-content: center !important;
    font-weight: 500 !important;
    color: #475569 !important;
}

/* 8. MOBILE RESPONSIVE */
.wd-minimal-header {
    background: #fff !important;
    /* Ensure white */
}

/* =========================================
   48. SINGLE PRODUCT CREATIVE POLISH (SPOTLIGHT & GLASS)
   ========================================= */

/* User Request: "creative premium design that convert a lot... look very deep" */

/* 1. CREATIVE SPOTLIGHT EFFECT */
/* Add a subtle golden/warm glow behind the main product image */
.wd-col-gallery {
    position: relative !important;
    z-index: 1 !important;
}

.wd-col-gallery::before {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 120% !important;
    height: 120% !important;
    background: radial-gradient(circle, rgba(253, 224, 71, 0.15) 0%, rgba(255, 255, 255, 0) 70%) !important;
    z-index: -1 !important;
    pointer-events: none !important;
}

/* 2. GLASSMORPHISM BUY BOX */
/* "Refine again... look very deep" */
.wd-sticky-buy-box-card {
    background: rgba(255, 255, 255, 0.9) !important;
    /* Semi-transparent */
    backdrop-filter: blur(16px) !important;
    /* Premium Glass Blur */
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    box-shadow:
        0 20px 60px -10px rgba(0, 0, 0, 0.08),
        /* Deep Drop */
        0 0 0 1px rgba(0, 0, 0, 0.02) inset !important;
    /* Inner Light Ring */
    border-radius: 20px !important;
    /* Yellow border stays from previous polish, nice touch */
}

/* 3. HIGH CONVERTING PULSE ANIMATION */
@keyframes wd-pulse-yellow {
    0% {
        box-shadow: 0 0 0 0 rgba(253, 224, 71, 0.4);
    }

    70% {
        box-shadow: 0 0 0 14px rgba(253, 224, 71, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(253, 224, 71, 0);
    }
}

.wd-prime-buy-btn {
    animation: wd-pulse-yellow 2s infinite !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    border: none !important;
    /* Cleaner look */
}

.wd-prime-buy-btn:hover {
    animation: none !important;
    /* Stop pulse on interaction */
    transform: scale(1.02) translateY(-2px) !important;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15), 0 0 0 4px rgba(253, 224, 71, 0.3) !important;
}

/* 4. "VERIFIED" PRICE TYPOGRAPHY */
.wd-price-hero {
    position: relative !important;
}

/*
.wd-price-hero::before {
    content: "✓ Best Price"; 
    position: absolute;
    top: -24px;
    right: 0;
    font-size: 0.7rem;
    color: #16A34A; 
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
*/

/* 5. CREATIVE SECTION DIVIDERS */
/* Use gradient lines instead of solid borders */
.wd-section-card {
    border-bottom: 1px solid transparent !important;
    position: relative !important;
}

.wd-section-card::after {
    content: "" !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 10% !important;
    right: 10% !important;
    height: 1px !important;
    background: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.06) 50%, transparent 100%) !important;
}

/* 6. TRUST STRIP REFINEMENT (Modern Pill) */
.wd-trust-badge-container {
    background: #F1F5F9 !important;
    /* Cool Gray */
    border-radius: 999px !important;
    /* Full Pill Container */
    padding: 12px 24px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

.wd-trust-text {
    font-size: 0.7rem !important;
    width: auto !important;
}

.wd-payment-icons {
    opacity: 0.7 !important;
    transform: scale(0.9) !important;
}

/* =========================================
   49. SINGLE PRODUCT GALLERY RESIZE (PREMIUM 55/45)
   ========================================= */

/* User Request: "make the gallery a little bit bigger or use the premium sizes" */

.wd-product-hero-grid {
    grid-template-columns: 55fr 45fr !important;
    /* Premium Visual Dominance */
    gap: 80px !important;
    /* Elegant spacing to prevent crowding */
    align-items: flex-start !important;
}

@media (max-width: 1200px) {
    .wd-product-hero-grid {
        grid-template-columns: 1fr 1fr !important;
        /* Balanced on smaller laptops */
        gap: 40px !important;
    }
}

@media (max-width: 1024px) {
    .wd-product-hero-grid {
        grid-template-columns: 1fr !important;
        /* Stacked on tablet */
    }
}

/* Ensure image takes full width of its new larger column */
.wd-col-gallery {
    max-width: 100% !important;
}

.wd-main-image-slide {
    width: 100% !important;
    aspect-ratio: auto !important;
    /* Let image natural height shine or enforce 1:1 / 4:5? */
    /* Usually premium digital products look good in 4:3 or Square. Let's trust natural but restrict slightly if super tall */
    max-height: 80vh !important;
    object-fit: cover !important;
}

/* Adjust Buy Box to fit the 45% column cleanly */
.wd-sticky-buy-box-card {
    top: 140px !important;
    /* Ensure it doesn't hit header */
    padding: 40px !important;
    /* Restore some padding since we have space */
}

/* =========================================
   50. SINGLE PRODUCT PRICE & DESC FIX
   ========================================= */

/* User Request: "refine the price... make it better... and add a short description" */

/* 1. PRICE CONTAINER LAYOUT (Fix Broken Stacking) */
.wd-price-hero {
    display: flex !important;
    align-items: baseline !important;
    /* Align text baselines */
    justify-content: flex-start !important;
    /* Start left, not space-between */
    gap: 16px !important;
    font-family: inherit !important;
    line-height: 1 !important;
    margin-bottom: 24px !important;
    flex-wrap: wrap !important;
}

/* 2. REGULAR PRICE (Was / List Price) */
.wd-price-hero del {
    color: #9CA3AF !important;
    /* Muted Grey */
    font-size: 1.25rem !important;
    /* Smaller */
    font-weight: 500 !important;
    text-decoration: line-through !important;
    opacity: 0.8 !important;
    order: 1 !important;
    /* Ensure it comes first visually if needed */
}

/* 3. SALE PRICE (Now / Premium) */
.wd-price-hero ins {
    text-decoration: none !important;
    order: 2 !important;
    background: transparent !important;
}

.wd-price-hero ins .amount,
.wd-price-hero>.amount {
    /* Handle simple products with no sale */
    color: #111111 !important;
    font-size: 3rem !important;
    /* Massive Converting Size */
    font-weight: 900 !important;
    /* Ultra Bold */
    letter-spacing: -0.04em !important;
}

/* Fix the isolated Currency Symbol issue in screenshot */
.woocommerce-Price-currencySymbol {
    font-size: 0.7em !important;
    /* Slightly smaller than numbers */
    vertical-align: top !important;
    margin-right: 2px !important;
    font-weight: 700 !important;
}

/* 4. PREMIUM BADGE (Reposition) */
.wd-price-hero::after {
    display: none !important;
    /* Remove the CSS "Premium License" badge to clear clutter */
}

/* 5. SHORT DESCRIPTION (Make Prominent) */
/* "add a short description somewhere" - It was there but maybe hidden or empty */
.wd-short-description-clean {
    display: block !important;
    font-size: 1.05rem !important;
    line-height: 1.6 !important;
    color: #4B5563 !important;
    /* Readable Slate */
    margin-bottom: 32px !important;
    /* Space before buttons */
    border-left: 3px solid #FDE047 !important;
    /* Premium Accent Bar */
    padding-left: 16px !important;
}

/* =========================================
   10. UNIFIED SINGLE HEADER (Global Single Mode)
   ========================================= */
/* STATE: SINGLE MODE (Yellow Pill, Inverse) */
.single .site-header .header-container,
.single-product .site-header .header-container {
    background-color: #FDE047 !important;
    /* Sunny Yellow */
    color: #111827 !important;
    /* Deep Charcoal */
    border: 1px solid transparent !important;
    /* Clean */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03) !important;
    /* Soft Shadow */
    height: 64px !important;
    /* Reduced height */
}

/* Page Background for Singles */
body.single,
body.single-product,
.single #page,
.single-product #page {
    background-color: #FFFFFF !important;
    /* Pure White Page Background */
    background: #FFFFFF !important;
}

/* Force Header Wrapper & Hero Top Area to White/Transparent */
.single .site-header,
.single-product .site-header {
    background-color: transparent !important;
    background: transparent !important;
}

.single .wd-hero-block,
.single-product .wd-hero-block {
    background-color: #FFFFFF !important;
    /* Remove yellow hero background */
    display: none !important;
    /* Double safety: if it exists, hide it or make it white. Hiding might break layout if used for spacing. Let's make it white and transparent border. */
    border: none !important;
}

.single .main-navigation ul li a,
.single .wd-header-cart,
.single .menu-toggle,
.single-product .main-navigation ul li a,
.single-product .wd-header-cart,
.single-product .menu-toggle {
    color: #111827 !important;
}

.single .main-navigation ul li a:hover,
.single-product .main-navigation ul li a:hover {
    background-color: rgba(255, 255, 255, 0.4) !important;
    /* Subtle White Hover on Yellow */
    color: #000 !important;
}

.single .btn-bundle,
.single-product .btn-bundle {
    background-color: #111827 !important;
    color: #FFFFFF !important;
}

.single .btn-bundle:hover,
.single-product .btn-bundle:hover {
    background-color: #000000 !important;
    transform: translateY(-2px);
}

/* FORCE FIX FOR BROKEN PILLS */
.wd-card-pill,
.product-card-wrapper .wd-card-pill,
.wd-grid-card .wd-card-pill {
    height: auto !important;
    width: auto !important;
    min-height: 0 !important;
    max-height: 32px !important;
    min-width: 0 !important;
    aspect-ratio: auto !important;
    position: absolute !important;
    top: 12px !important;
    left: 12px !important;
    bottom: auto !important;
    right: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #ffffff !important;
    color: #111111 !important;
    border-radius: 99px !important;
    padding: 6px 14px !important;
    margin: 0 !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    transform: none !important;
    writing-mode: horizontal-tb !important;
    z-index: 20 !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important;
}

/* SINGLE PORTFOLIO HERO COMPACTION */
.wd-single-project-hero {
    padding-top: 120px !important;
    /* Reduced from 180px */
    padding-bottom: 40px !important;
    /* Reduced from 120px */
    background-color: #F9FAFB;
    /* Light Gray Background */
    border-bottom: 1px solid #E5E7EB;
}

.wd-single-project-hero .project-title {
    font-size: 2.25rem !important;
    /* Smaller than 3-4rem */
    margin-bottom: 8px !important;
}

.wd-single-project-hero .project-meta {
    margin-bottom: 8px !important;
    font-size: 0.8rem !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #F59E0B;
}

.wd-single-project-hero .project-client {
    font-size: 0.9rem !important;
    color: #6B7280;
}


/* =========================================
   FEATURED PROJECT REFINEMENT (COMPACT + VOTE)
   ========================================= */

/* 1. AGGRESSIVE COMPACTION */
.wd-portfolio-hero {
    margin-bottom: 24px !important;
    min-height: 0 !important;
    /* Reset */
    grid-template-columns: 1.1fr 1fr !important;
    /* Adjust ratio */
    border-radius: 16px !important;
}

.wd-hero-image-side {
    min-height: 220px !important;
    /* Even smaller */
    height: 100% !important;
}

.wd-hero-content-side {
    padding: 24px 30px !important;
    /* Tight padding */
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

.wd-hero-title {
    font-size: 1.6rem !important;
    /* Compact Title */
    line-height: 1.1 !important;
    margin-bottom: 8px !important;
}

.wd-hero-desc {
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
    margin-bottom: 16px !important;
    -webkit-line-clamp: 3 !important;
    line-clamp: 3 !important;
    /* Strict 3 lines */
}

.wd-chips-row {
    margin-bottom: 12px !important;
    gap: 6px !important;
}

/* 2. VOTE BUTTON (Micro-Interaction) */
.wd-vote-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #F3F4F6;
    border: 1px solid rgba(0, 0, 0, 0.05);
    padding: 4px 10px;
    border-radius: 99px;
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 700;
    color: #4B5563;
    transition: all 0.2s ease;
    z-index: 10;
}

.wd-vote-btn:hover {
    background: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.wd-vote-btn .dashicons-heart {
    font-size: 14px;
    width: 14px;
    height: 14px;
    color: #9CA3AF;
    transition: color 0.2s, transform 0.2s;
}

.wd-vote-btn.active {
    background: #FEF2F2;
    /* Light Red bg */
    color: #EF4444;
    border-color: #FECACA;
}

.wd-vote-btn.active .dashicons-heart {
    color: #EF4444;
    /* Red Heart */
}

/* 3. SOLID CTA (Theme Match) */
.wd-portfolio-hero .wd-btn-pill.primary {
    background: #111827 !important;
    /* Solid Navy/Black */
    color: #FFFFFF !important;
    padding: 10px 24px !important;
    border-radius: 99px !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important;
    /* Consistent Shadow */
    transform: none !important;
    /* Reset any gradient logic */
}

.wd-portfolio-hero .wd-btn-pill.primary:hover {
    background: #000000 !important;
    transform: translateY(-2px) !important;
}

/* Mobile Stack */
@media (max-width: 768px) {
    .wd-portfolio-hero {
        grid-template-columns: 1fr !important;
    }

    .wd-hero-image-side {
        min-height: 200px !important;
    }

    .wd-hero-content-side {
        padding: 24px !important;
    }
}


/* =========================================
   PORTFOLIO SWITCHER THUMBNAILS
   ========================================= */

.wd-portfolio-thumbs {
    display: flex;
    gap: 12px;
    margin-top: 16px;
    overflow-x: auto;
    padding-bottom: 8px;
    /* For scrollbar breathing room */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.wd-thumb-item {
    flex: 0 0 100px;
    /* Fixed width thumbnails */
    height: 70px;
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid transparent;
    /* Default border */
    background: transparent;
    padding: 0;
    cursor: pointer;
    transition: all 0.2s ease;
    opacity: 0.7;
}

.wd-thumb-item:hover {
    opacity: 1;
    transform: translateY(-2px);
}

.wd-thumb-item.active {
    border-color: #111111;
    /* Active Black Border */
    opacity: 1;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.thumb-img-wrap {
    width: 100%;
    height: 100%;
}

.thumb-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Ensure Compaction of Main Card (Re-iterate just in case) */
.wd-portfolio-hero {
    margin-bottom: 16px !important;
    /* Tighter gap to thumbs */
}

/* Mobile Tweaks */
@media (max-width: 768px) {
    .wd-portfolio-thumbs {
        gap: 8px;
    }

    .wd-thumb-item {
        flex: 0 0 80px;
        height: 60px;
    }
}


/* =========================================
   15. SWITCHER VISUAL REFINEMENTS (Matching User Screenshot)
   ========================================= */

/* Main Card Border & Radius */
.wd-portfolio-hero {
    border: 1px solid #E5E7EB !important;
    /* Visible light border */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03) !important;
    /* Softer shadow */
}

/* Outlined Chips (Screenshot Match) */
.wd-portfolio-hero .wd-chip {
    background: transparent !important;
    border: 1px solid #E5E7EB !important;
    color: #374151 !important;
    font-weight: 600 !important;
    padding: 4px 12px !important;
    border-radius: 99px !important;
    /* Full pill radius */
}

/* Outlined Vote Button (Consistent with Chips) */
.wd-vote-btn {
    background: transparent !important;
    border: 1px solid #E5E7EB !important;
    color: #4B5563 !important;
}

.wd-vote-btn:hover {
    border-color: #D1D5DB !important;
    background: #F9FAFB !important;
}

/* More Projects Card */
.wd-thumb-item.thumb-more {
    background: #fff;
    border: 1px solid #E5E7EB;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
}

.thumb-more-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
    color: #111;
}

.thumb-more-content .count {
    font-size: 1.1rem;
    font-weight: 800;
}

.thumb-more-content .label {
    font-size: 0.65rem;
    text-transform: uppercase;
    color: #6B7280;
    font-weight: 600;
}


/* =========================================
   16. SINGLE PROJECT PREMIUM STYLES
   ========================================= */

/* Structure */
.wd-project-hero-section {
    background-color: #F9FAFB;
    /* Soft Gray instead of Yellow */
    padding: 60px 0 100px 0;
    margin-bottom: 60px;
}

.wd-back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 30px;
    font-weight: 600;
    color: #4B5563;
    /* Darker gray for contrast */
    text-decoration: none;
    font-size: 0.9rem;
    padding: 8px 16px;
    background: rgba(0, 0, 0, 0.05);
    /* Darker rgba */
    border-radius: 8px;
    transition: all 0.2s;
}

.wd-back-link:hover {
    background: rgba(0, 0, 0, 0.1);
    transform: translateX(-4px);
}

/* Main Card */
.wd-project-card {
    background: #FFFFFF;
    border-radius: 24px;
    padding: 40px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    /* Softer shadow */
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 50px;
    align-items: start;
    border: 1px solid #E5E7EB;
    /* Subtle border to pop from gray bg */
}

/* ... existing styles ... */

/* Header Overlap Fix (if needed) */
body.single-project .site-header {
    background: #FFFFFF !important;
    /* White Header */
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
}

/* Media Side */
.wd-main-media-frame {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    margin-bottom: 20px;
}

.wd-project-main-img {
    width: 100%;
    height: auto;
    display: block;
}

.wd-gallery-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.wd-gallery-thumb {
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.2s;
    aspect-ratio: 1/1;
}

.wd-gallery-thumb:hover {
    transform: translateY(-3px);
    border-color: #FDE047;
}

.wd-gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Info Side */
.wd-project-info {
    padding-top: 10px;
}

.wd-meta-label {
    text-transform: uppercase;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1px;
    color: #9CA3AF;
    margin-bottom: 8px;
    display: block;
}

.wd-project-title {
    font-size: 2.75rem;
    line-height: 1.1;
    font-weight: 800;
    color: #111827;
    margin-bottom: 16px;
    letter-spacing: -0.02em;
}

.wd-client-row {
    font-size: 1.1rem;
    margin-bottom: 24px;
    color: #4B5563;
}

.wd-client-row .value {
    font-weight: 700;
    color: #111;
}

.wd-project-summary {
    font-size: 1.05rem;
    line-height: 1.6;
    color: #374151;
    margin-bottom: 30px;
    padding-bottom: 30px;
    border-bottom: 1px solid #F3F4F6;
}

/* Chips */
.wd-chips-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 30px;
}

.wd-chip-pill {
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.wd-chip-pill.industry {
    background: #F3F4F6;
    color: #374151;
}

.wd-chip-pill.service {
    background: #EEF2FF;
    color: #4F46E5;
}

/* Stats */
.wd-stats-row {
    display: flex;
    gap: 40px;
    margin-bottom: 30px;
}

.wd-stat-box {
    display: flex;
    flex-direction: column;
}

.wd-stat-box .stat-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    color: #9CA3AF;
    font-weight: 600;
    margin-bottom: 4px;
}

.wd-stat-box .stat-value {
    font-size: 1rem;
    font-weight: 800;
    color: #111;
}

/* CTA */
.wd-btn-block {
    display: block;
    width: 100%;
    text-align: center;
    padding: 18px;
    border-radius: 12px;
    background: #111827;
    color: white;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.2s;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.wd-btn-block:hover {
    background: #000;
    transform: translateY(-2px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}

/* Content Body */
.wd-container-narrow {
    max-width: 800px;
    margin: 0 auto;
}

.wd-case-study-body {
    padding-bottom: 100px;
}

.wd-case-study-body h2 {
    font-size: 2rem;
    font-weight: 700;
    color: #111;
    margin-top: 60px;
    margin-bottom: 20px;
}

.wd-case-study-body h3 {
    font-size: 1.5rem;
    color: #374151;
    margin-top: 40px;
    margin-bottom: 16px;
}

.wd-case-study-body p,
.wd-case-study-body li {
    font-size: 1.1rem;
    line-height: 1.7;
    color: #4B5563;
    margin-bottom: 1.5em;
}

.wd-case-study-body ul {
    margin-bottom: 2em;
    padding-left: 20px;
}

.wd-case-study-body li {
    margin-bottom: 0.8em;
}

/* Header Overlap Fix (if needed) */
body.single-project .site-header {
    background: #FDE047 !important;
    /* Match hero */
    box-shadow: none !important;
}

/* Responsive */
@media (max-width: 900px) {
    .wd-project-card {
        grid-template-columns: 1fr;
        padding: 24px;
        gap: 30px;
    }

    .wd-project-title {
        font-size: 2rem;
    }

    .wd-gallery-strip {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Reset Single Project Header to White */
body.single-project .site-header {
    background: #FFFFFF !important;
    border-bottom: 1px solid #F3F4F6 !important;
}

/* =========================================
   8. PREMIUM PORTFOLIO SYSTEM (REFINED)
   ========================================= */
.wd-portfolio-wrapper {
    background: #FFFFFF;
    min-height: 100vh;
}

.portfolio-archive-container.wd-container {
    padding-top: 40px !important;
    /* Reduced padding */
    padding-bottom: 60px !important;
}

/* --- Compact Featured Card --- */
.wd-portfolio-switcher-wrap {
    margin-bottom: 60px;
    /* Reduced gap */
    margin-top: -80px;
    /* Pull into Hero overlap */
    position: relative;
    z-index: 10;
}

.wd-portfolio-hero.compact-mode {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    /* Less aggressive split */
    background: #FFFFFF;
    border-radius: 20px;
    box-shadow: 0 15px 30px -10px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    min-height: 420px;
    /* Reduced height */
    margin-bottom: 24px;
    transition: transform 0.3s ease;
    cursor: auto;
}

.wd-portfolio-hero.compact-mode:hover {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1);
}

.wd-hero-image-side {
    position: relative;
    overflow: hidden;
    height: 100%;
    min-height: 100%;
}

.wd-hero-img-container {
    height: 100%;
    width: 100%;
}

.wd-hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wd-hero-content-side {
    padding: 32px 40px;
    /* Compact padding */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Header Row & Votes */
.wd-hero-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.wd-hero-meta {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    color: #6B7280;
    display: flex;
    align-items: center;
    gap: 8px;
}

.wd-indicator-dot {
    width: 6px;
    height: 6px;
    background: #14B8A6;
    border-radius: 50%;
}

/* Voting Pills */
.wd-vote-group {
    display: flex;
    gap: 8px;
}

.wd-vote-pill {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 99px;
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 600;
    color: #374151;
    transition: all 0.2s;
}

.wd-vote-pill:hover {
    background: #F9FAFB;
    border-color: #D1D5DB;
}

/* Up Vote (Green) */
.wd-vote-pill.up.active {
    background: #F0FDF4;
    /* Light Green */
    border-color: #86EFAC;
    color: #16A34A;
    /* Strong Green */
}

/* Down Vote (Red) */
.wd-vote-pill.down.active {
    background: #FEF2F2;
    /* Light Red */
    border-color: #FECACA;
    color: #EF4444;
    /* Strong Red */
}

/* Content Typography */
.wd-hero-title {
    font-size: 2rem;
    line-height: 1.1;
    margin-bottom: 12px;
    font-weight: 800;
    color: #111827;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.wd-trust-line {
    font-size: 0.8rem;
    color: #6B7280;
    font-weight: 500;
    margin-bottom: 12px;
    opacity: 0.8;
}

.wd-hero-desc {
    font-size: 0.95rem;
    line-height: 1.5;
    color: #4B5563;
    margin-bottom: 24px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-width: 90%;
}

/* Footer Actions */
.wd-hero-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
}

.wd-btn-pill.primary.solid-cta {
    background: #111827;
    /* Solid Black/Navy */
    color: white;
    padding: 10px 24px;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 99px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border: none;
}

.wd-btn-pill.primary.solid-cta:hover {
    background: #000;
    transform: translateY(-1px);
}

.wd-slider-nav.compact .wd-nav-btn {
    width: 36px;
    height: 36px;
    font-size: 14px;
}

/* --- Compact Thumbs --- */
.wd-portfolio-thumbs.compact-thumbs {
    gap: 12px;
    padding-bottom: 8px;
}

.wd-thumb-item {
    flex: 0 0 100px;
    height: 64px;
    border-radius: 8px;
}

.wd-thumb-item.active {
    box-shadow: 0 0 0 2px #111827;
    /* Dark active border */
}

/* --- Dense Grid --- */
.wd-project-grid.premium-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
    /* Tighter gap */
}

.wd-grid-card {
    background: transparent;
    border-radius: 12px;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.wd-grid-card:hover {
    transform: translateY(-3px);
}

.wd-card-image-wrap {
    aspect-ratio: 4/3;
    border-radius: 12px;
    /* Consistent Radius */
    overflow: hidden;
    position: relative;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    transition: box-shadow 0.2s;
}

.wd-grid-card:hover .wd-card-image-wrap {
    box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.1);
}

.wd-card-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.wd-grid-card:hover .wd-card-image-wrap img {
    transform: scale(1.02);
}

.wd-card-content.compact h4 {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 4px 0;
    color: #111827;
}

.wd-card-meta-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
}

.wd-card-cat {
    background: #F3F4F6;
    color: #4B5563;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 500;
}

.wd-card-cta {
    color: #111827;
    font-weight: 600;
    opacity: 0;
    transform: translateX(-5px);
    transition: all 0.2s;
}

.wd-grid-card:hover .wd-card-cta,
.wd-product-card:hover .wd-card-cta,
.woocommerce ul.products li.product:hover .wd-card-cta {
    opacity: 1;
    transform: translateX(0);
}

/* Responsive */
@media (max-width: 900px) {
    .wd-portfolio-hero.compact-mode {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .wd-hero-image-side {
        height: 240px;
    }

    .wd-hero-content-side {
        padding: 24px;
    }

    .wd-hero-header-row {
        margin-bottom: 12px;
    }

    .wd-hero-title {
        font-size: 1.5rem;
    }

    .portfolio-archive-container.wd-container {
        padding-top: 24px !important;
    }
}

/* =========================================
   PREMIUM SPLIT PORTFOLIO (LIST + PREVIEW)
   (Consolidated from portfolio-split.css)
   ========================================= */

/* Wrapper & Container */
.wd-portfolio-wrapper {
    background: #FFFFFF;
    min-height: 100vh;
}

.portfolio-archive-container.wd-container {
    padding-top: 40px !important;
    padding-bottom: 60px !important;
}

/* --- Split Layout Wrapper --- */
.wd-split-layout-wrap {
    display: grid;
    grid-template-columns: 380px 1fr;
    /* Fixed Width List + Auto Preview */
    gap: 32px;
    margin-bottom: 80px;
    margin-top: -80px;
    /* Pull into Hero */
    position: relative;
    z-index: 10;
    min-height: 500px;
}

/* --- Left Column: List --- */
.wd-split-list-col {
    background: #FFFFFF;
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.05);
    border: 1px solid #F3F4F6;
    display: flex;
    flex-direction: column;
}

.wd-split-header {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #9CA3AF;
    margin-bottom: 20px;
    padding-left: 8px;
    font-weight: 700;
}

.wd-split-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    max-height: 500px;
    /* Optional scroll */
    padding-right: 4px;
    /* Space for scrollbar */
    scrollbar-width: thin;
}

/* List Item */
.wd-list-item {
    display: flex;
    align-items: center;
    gap: 16px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 12px;
    padding: 12px;
    cursor: pointer;
    text-align: left;
    transition: all 0.2s ease;
}

.wd-list-item:hover {
    background: #F9FAFB;
}

.wd-list-item.active {
    background: #FFFFFF;
    border-color: #E5E7EB;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.wd-list-item.active .wd-list-title {
    color: #111;
}

.wd-list-item.active .wd-list-cat {
    color: #14B8A6;
}

/* List Thumb */
.wd-list-thumb {
    width: 60px;
    height: 60px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
    background: #F3F4F6;
}

.wd-list-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* List Info */
.wd-list-info {
    flex-grow: 1;
}

.wd-list-cat {
    font-size: 0.7rem;
    font-weight: 600;
    color: #9CA3AF;
    text-transform: uppercase;
    display: block;
    margin-bottom: 2px;
}

.wd-list-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #4B5563;
    line-height: 1.2;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.wd-list-arrow {
    font-size: 18px;
    color: #D1D5DB;
    opacity: 0;
    transform: translateX(-5px);
    transition: all 0.2s;
}

.wd-list-item:hover .wd-list-arrow,
.wd-list-item.active .wd-list-arrow {
    opacity: 1;
    transform: translateX(0);
    color: #111;
}

/* --- Right Column: Preview --- */
.wd-split-preview-col {
    position: relative;
    /* Sticky potential if needed, but simple for now */
}

.wd-preview-card {
    background: #FFFFFF;
    border-radius: 24px;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.08);
    /* Float effect */
    border: 1px solid rgba(0, 0, 0, 0.02);
}

.wd-preview-image-wrap {
    flex-grow: 1;
    position: relative;
    background: #F3F4F6;
    min-height: 350px;
    overflow: hidden;
}

.wd-preview-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.3s ease;
}

.wd-preview-overlay-gradient {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 150px;
    background: linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
    pointer-events: none;
}

/* Floating Vote (Top Right) */
.wd-preview-vote-wrap {
    position: absolute;
    top: 24px;
    right: 24px;
    display: flex;
    gap: 8px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    padding: 8px 12px;
    border-radius: 99px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    z-index: 20;
}

.wd-vote-pill {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 99px;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 600;
    color: #374151;
    transition: all 0.2s;
}

.wd-vote-pill:hover {
    background: #F9FAFB;
}

.wd-vote-pill.up.active {
    color: #16A34A;
    background: #F0FDF4;
}

.wd-vote-pill.down.active {
    color: #EF4444;
    background: #FEF2F2;
}

/* Content (Bottom) */
.wd-preview-content {
    padding: 32px 48px;
    background: #FFFFFF;
    position: relative;
}

.wd-preview-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #6B7280;
    margin-bottom: 12px;
}

.wd-preview-meta .wd-indicator-dot {
    background: #14B8A6;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.wd-preview-title {
    font-size: 2.5rem;
    line-height: 1.1;
    margin-bottom: 16px;
    color: #111;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.wd-preview-desc {
    font-size: 1.05rem;
    line-height: 1.6;
    color: #4B5563;
    margin-bottom: 32px;
    max-width: 90%;
}

/* CTA */
.wd-btn-pill.primary.solid-cta {
    background: #111827;
    color: white;
    padding: 12px 28px;
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: 99px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.wd-btn-pill.primary.solid-cta:hover {
    background: #000;
    transform: translateY(-2px);
}

/* --- Dense Grid for Recent Projects --- */
.wd-project-grid.premium-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
}

.wd-grid-card {
    border-radius: 12px;
    transition: all 0.2s;
}

.wd-grid-card:hover {
    transform: translateY(-4px);
}

.wd-card-image-wrap {
    aspect-ratio: 4/3;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
}

.wd-card-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s;
}

.wd-grid-card:hover img {
    transform: scale(1.05);
}

/* --- Responsive --- */
@media (max-width: 1000px) {
    .wd-split-layout-wrap {
        grid-template-columns: 1fr;
        /* Stack */
        margin-top: -40px;
        gap: 24px;
    }

    .wd-split-list-col {
        order: 2;
    }

    .wd-split-preview-col {
        order: 1;
    }

    .wd-preview-title {
        font-size: 1.8rem;
    }

    .wd-preview-image-wrap {
        min-height: 250px;
    }

    /* Horizontal List for Mobile? */
    .wd-split-list {
        flex-direction: row;
        overflow-x: auto;
    }

    .wd-list-item {
        min-width: 260px;
        flex-direction: row;
    }
}