/**
 * Hansen Timber Custom Shortcodes Styles
 * For Salient Child Theme + WPBakery
 * @version 1.0
 */

/* ========================================
   CSS CUSTOM PROPERTIES (Variables)
   Matching Hansen Timber brand from variables.css
   ======================================== */

:root {
    /* Colors - matching Hansen Timber brand */
    --hansen-color-primary: #1a3c34;
    --hansen-color-primary-light: #2a5c4a;
    --hansen-color-primary-dark: #0f251f;
    --hansen-color-accent: #b8956b;
    --hansen-color-accent-light: #d4b896;
    --hansen-color-accent-dark: #8a6f50;
    --hansen-color-logo-green: #99CC33; /* Bright green from logo - use sparingly for accents */
    --hansen-color-white: #ffffff;
    --hansen-color-off-white: #faf9f7;
    --hansen-color-cream: #f5f3ef;
    --hansen-color-warm-gray: #e8e4de;
    --hansen-color-mid-gray: #9a9590;
    --hansen-color-dark-gray: #4a4845;
    --hansen-color-charcoal: #1a1a1a;
    --hansen-color-text: #1a1a1a;
    --hansen-color-text-secondary: #4a4845;
    --hansen-color-text-muted: #9a9590;
    --hansen-color-border: #e8e4de;
    
    /* Spacing - matching theme */
    --hansen-space-1: 0.25rem;
    --hansen-space-2: 0.5rem;
    --hansen-space-3: 0.75rem;
    --hansen-space-4: 1rem;
    --hansen-space-5: 1.25rem;
    --hansen-space-6: 1.5rem;
    --hansen-space-8: 2rem;
    --hansen-space-10: 2.5rem;
    --hansen-space-12: 3rem;
    
    /* Typography - matching theme fonts */
    --hansen-font-family-heading: 'Roboto Condensed', Arial, sans-serif;
    --hansen-font-weight-heading: 700;
    --hansen-font-family-body: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    
    /* Transitions - matching theme */
    --hansen-transition-fast: 150ms ease;
    --hansen-transition-normal: 300ms ease;
    --hansen-transition-slow: 500ms ease;
    
    /* Border Radius - matching theme */
    --hansen-radius-sm: 0.25rem;
    --hansen-radius-md: 0.5rem;
    --hansen-radius-lg: 1rem;
    --hansen-radius-xl: 1.5rem;
    --hansen-radius-full: 9999px;
    
    /* Shadows - matching theme */
    --hansen-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --hansen-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --hansen-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}


/* ========================================
   GRID LAYOUTS
   Using !important to override Salient conflicts
   ======================================== */

.hansen-audience-cards-grid,
.hansen-product-cards-grid {
    display: grid !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Grid Columns */
.hansen-grid-2 {
    grid-template-columns: repeat(2, 1fr) !important;
}

.hansen-grid-3 {
    grid-template-columns: repeat(3, 1fr) !important;
}

.hansen-grid-4 {
    grid-template-columns: repeat(4, 1fr) !important;
}

/* Grid Gaps */
.hansen-gap-none {
    gap: 0 !important;
}

.hansen-gap-small {
    gap: 1rem !important;
}

.hansen-gap-default {
    gap: 2rem !important;
}

.hansen-gap-large {
    gap: 3rem !important;
}

/* Responsive Grid */
@media (max-width: 1024px) {
    .hansen-grid-4 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .hansen-grid-3 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 768px) {
    .hansen-grid-2,
    .hansen-grid-3,
    .hansen-grid-4 {
        grid-template-columns: 1fr !important;
    }
    
    .hansen-gap-default {
        gap: 1.5rem !important;
    }
    
    .hansen-gap-large {
        gap: 2rem !important;
    }
}


/* ========================================
   AUDIENCE CARD STYLES
   Matching the original index.html design
   Using high specificity to override Salient
   ======================================== */

.hansen-audience-cards-grid .hansen-audience-card,
div.hansen-audience-card {
    text-align: center !important;
    padding: 2.5rem !important;
    background-color: #ffffff !important;
    border-radius: 1rem !important;
    border: 1px solid #e8e4de !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    box-sizing: border-box !important;
    transition:border-color ease 300ms, box-shadow ease 300ms;
}

.hansen-audience-card:hover {
    border-color: #1a3c34 !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
}

.hansen-audience-card .hansen-audience-card-icon,
.hansen-audience-card > .hansen-audience-card-icon {
    width: 64px !important;
    height: 64px !important;
    margin: 0 auto 1.5rem auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #f5f3ef !important;
    border-radius: 9999px !important;
    color: #1a3c34 !important;
    flex-shrink: 0 !important;
    transition: background-color ease 300ms;
}

.hansen-audience-card .hansen-audience-card-icon svg,
.hansen-audience-card-icon > svg {
    width: 32px !important;
    height: 32px !important;
}

/* Logo green accent on icon hover */
.hansen-audience-card:hover .hansen-audience-card-icon {
    background-color: var(--hansen-color-logo-green) !important;
    color: var(--hansen-color-primary-dark) !important;
}

.hansen-audience-card .hansen-audience-card-title,
.hansen-audience-card > .hansen-audience-card-title {
    font-family: 'Roboto Condensed', Arial, sans-serif !important;
    font-weight: 700 !important;
    font-size: 1.25rem !important;
    font-weight: 400 !important;
    color: #1a1a1a !important;
    margin: 0 0 1rem 0 !important;
    line-height: 1.3 !important;
    padding: 0 !important;
}

.hansen-audience-card .hansen-audience-card-description,
.hansen-audience-card > .hansen-audience-card-description {
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 0.875rem !important;
    line-height: 1.625 !important;
    color: #4a4845 !important;
    margin: 0 0 1.5rem 0 !important;
    flex-grow: 1 !important;
    padding: 0 !important;
}


/* ========================================
   PRODUCT CARD STYLES
   Matching the original index.html design
   Using high specificity to override Salient
   ======================================== */

.hansen-product-cards-grid .hansen-product-card,
a.hansen-product-card {
    position: relative !important;
    display: block !important;
    aspect-ratio: 3/4 !important;
    border-radius: 1rem !important;
    overflow: hidden !important;
    text-decoration: none !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    background-color: #f5f3ef !important;
}

/* Fallback for browsers without aspect-ratio support */
@supports not (aspect-ratio: 3/4) {
    .hansen-product-cards-grid .hansen-product-card,
    a.hansen-product-card {
        padding-bottom: 133.33% !important; /* 4/3 ratio */
        height: 0 !important;
    }
}

.hansen-product-card .hansen-product-card-image,
.hansen-product-card > .hansen-product-card-image {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

.hansen-product-card .hansen-product-card-image img,
.hansen-product-card-image > img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    transition: transform 0.5s ease !important;
    display: block !important;
}

.hansen-product-card:hover .hansen-product-card-image img {
    transform: scale(1.08) !important;
}

.hansen-product-card .hansen-product-card-overlay,
.hansen-product-card > .hansen-product-card-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: linear-gradient(
        to top,
        rgba(26, 26, 26, 0.9) 0%,
        rgba(26, 26, 26, 0.3) 50%,
        transparent 100%
    ) !important;
    transition: all 0.3s ease !important;
    pointer-events: none !important;
}

.hansen-product-card:hover .hansen-product-card-overlay {
    background: linear-gradient(
        to top,
        rgba(26, 60, 52, 0.95) 0%,
        rgba(26, 60, 52, 0.5) 50%,
        rgba(26, 60, 52, 0.2) 100%
    ) !important;
}

.hansen-product-card .hansen-product-card-content,
.hansen-product-card > .hansen-product-card-content {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    padding: 2rem !important;
    color: #ffffff !important;
    z-index: 2 !important;
    box-sizing: border-box !important;
}

.hansen-product-card .hansen-product-card-label,
.hansen-product-card-content > .hansen-product-card-label {
    display: block !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    color: #d4b896 !important;
    margin-bottom: 0.5rem !important;
    line-height: 1.4 !important;
}

.hansen-product-card .hansen-product-card-title,
.hansen-product-card-content > .hansen-product-card-title {
    font-family: 'Roboto Condensed', Arial, sans-serif !important;
    font-weight: 700 !important;
    font-size: 1.5rem !important;
    font-weight: 400 !important;
    color: #ffffff !important;
    margin: 0 0 0.75rem 0 !important;
    line-height: 1.3 !important;
    padding: 0 !important;
}

/* Description hidden by default, revealed on hover */
.hansen-product-card .hansen-product-card-description,
.hansen-product-card-content > .hansen-product-card-description {
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 0.875rem !important;
    line-height: 1.6 !important;
    color: rgba(255, 255, 255, 0.85) !important;
    margin: 0 0 1rem 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    transition: max-height 0.4s linear, opacity 0.3s ease !important;
    padding: 0 !important;
}

.hansen-product-card:hover .hansen-product-card-description {
    max-height: 100px !important;
    opacity: 1 !important;
}

.hansen-product-card .hansen-product-card-link,
.hansen-product-card-content > .hansen-product-card-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.025em !important;
    color: #d4b896 !important;
    text-decoration: none !important;
}

.hansen-product-card .hansen-product-card-link svg,
.hansen-product-card-link > svg {
    transition: transform 0.15s ease !important;
    width: 16px !important;
    height: 16px !important;
}

.hansen-product-card:hover .hansen-product-card-link svg {
    transform: translateX(4px) !important;
}

/* Logo green accent on link hover */
.hansen-product-card:hover .hansen-product-card-link {
    color: var(--hansen-color-logo-green) !important;
}


/* ========================================
   BUTTON STYLES
   Matching the original theme button styles
   Using high specificity to override Salient
   ======================================== */

.hansen-audience-card .hansen-btn,
a.hansen-btn,
.hansen-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    padding: 1rem 2rem !important;
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.025em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    border-radius: 0.25rem !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    border: 2px solid transparent !important;
    box-sizing: border-box !important;
}

.hansen-btn.hansen-btn-sm,
a.hansen-btn.hansen-btn-sm {
    padding: 0.5rem 1rem !important;
    font-size: 0.75rem !important;
}

.hansen-btn.hansen-btn-lg,
a.hansen-btn.hansen-btn-lg {
    padding: 1.25rem 2.5rem !important;
    font-size: 1rem !important;
}

.hansen-btn.hansen-btn-primary,
a.hansen-btn.hansen-btn-primary {
    background-color: #1a3c34 !important;
    color: #ffffff !important;
    border-color: #1a3c34 !important;
}

.hansen-btn.hansen-btn-primary:hover,
a.hansen-btn.hansen-btn-primary:hover {
    background-color: #0f251f !important;
    border-color: #0f251f !important;
}

.hansen-btn.hansen-btn-secondary,
a.hansen-btn.hansen-btn-secondary {
    background-color: transparent !important;
    color: #1a3c34 !important;
    border-color: #1a3c34 !important;
}

.hansen-btn.hansen-btn-secondary:hover,
a.hansen-btn.hansen-btn-secondary:hover {
    background-color: #1a3c34 !important;
    color: #ffffff !important;
}

.hansen-btn.hansen-btn-white,
a.hansen-btn.hansen-btn-white {
    background-color: #ffffff !important;
    color: #1a3c34 !important;
    border-color: #ffffff !important;
}

.hansen-btn.hansen-btn-white:hover,
a.hansen-btn.hansen-btn-white:hover {
    background-color: #faf9f7 !important;
    border-color: #faf9f7 !important;
}


/* ========================================
   MARQUEE SECTION STYLES
   Scrolling value propositions banner
   ======================================== */

.hansen-marquee-section {
    background: linear-gradient(135deg, #1a3c34 0%, #1f4a40 100%) !important;
    padding: 1.5rem 0 !important;
    overflow: hidden !important;
    position: relative !important;
    width: 100% !important;
}

/* Fade edges */
.hansen-marquee-section::before,
.hansen-marquee-section::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 100px !important;
    z-index: 2 !important;
    pointer-events: none !important;
}

.hansen-marquee-section::before {
    left: 0 !important;
    background: linear-gradient(to right, #1a3c34 0%, transparent 100%) !important;
}

.hansen-marquee-section::after {
    right: 0 !important;
    background: linear-gradient(to left, #1f4a40 0%, transparent 100%) !important;
}

.hansen-marquee-wrapper {
    position: relative !important;
    width: 100% !important;
}

.hansen-marquee-track {
    display: flex !important;
    gap: 0.5rem !important;
    animation: hansenMarquee 40s linear infinite !important;
    width: max-content !important;
}

.hansen-marquee-pause-hover .hansen-marquee-track:hover {
    animation-play-state: paused !important;
}

@keyframes hansenMarquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

.hansen-marquee-item {
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
    padding: 1rem 1.5rem !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 9999px !important;
    white-space: nowrap !important;
    transition: all 0.15s ease !important;
    cursor: default !important;
    backdrop-filter: blur(4px) !important;
    flex-shrink: 0 !important;
}

.hansen-marquee-item:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: var(--hansen-color-logo-green) !important;
    transform: scale(1.02) !important;
}

.hansen-marquee-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 9999px !important;
    color: #ffffff !important;
    flex-shrink: 0 !important;
}

.hansen-marquee-icon svg {
    width: 24px !important;
    height: 24px !important;
}

.hansen-marquee-content {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
}

.hansen-marquee-title {
    font-family: 'Roboto Condensed', Arial, sans-serif !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    color: #ffffff !important;
    letter-spacing: 0.025em !important;
}

.hansen-marquee-divider {
    color: #d4b896 !important;
    opacity: 0.6 !important;
}

.hansen-marquee-text {
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 0.875rem !important;
    color: rgba(255, 255, 255, 0.75) !important;
}

/* Responsive */
@media (max-width: 768px) {
    .hansen-marquee-section {
        padding: 1rem 0 !important;
    }
    
    .hansen-marquee-section::before,
    .hansen-marquee-section::after {
        width: 40px !important;
    }
    
    .hansen-marquee-item {
        padding: 0.75rem 1.25rem !important;
    }
    
    .hansen-marquee-icon {
        width: 32px !important;
        height: 32px !important;
    }
    
    .hansen-marquee-icon svg {
        width: 18px !important;
        height: 18px !important;
    }
    
    .hansen-marquee-title {
        font-size: 0.875rem !important;
    }
    
    .hansen-marquee-text,
    .hansen-marquee-divider {
        display: none !important;
    }
}


/* ========================================
   ANIMATIONS
   ======================================== */

/* Base animation state - using high specificity */
.hansen-product-card.has-animation,
.hansen-audience-card.has-animation {
    opacity: 0 !important;
    transition: opacity 0.6s ease, transform 0.6s ease !important;
}

.hansen-product-card.has-animation.animated,
.hansen-audience-card.has-animation.animated {
    opacity: 1 !important;
    transform: none !important;
}

/* Fade In */
.hansen-product-card.animation-fade-in,
.hansen-audience-card.animation-fade-in {
    opacity: 0 !important;
}

.hansen-product-card.animation-fade-in.animated,
.hansen-audience-card.animation-fade-in.animated {
    opacity: 1 !important;
}

/* Fade In Up */
.animation-fade-in-up {
    opacity: 0 !important;
    transform: translateY(30px) !important;
}

.animation-fade-in-up.animated {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* Fade In Down */
.animation-fade-in-down {
    opacity: 0 !important;
    transform: translateY(-30px) !important;
}

.animation-fade-in-down.animated {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* Fade In Left */
.animation-fade-in-left {
    opacity: 0 !important;
    transform: translateX(-30px) !important;
}

.animation-fade-in-left.animated {
    opacity: 1 !important;
    transform: translateX(0) !important;
}

/* Fade In Right */
.animation-fade-in-right {
    opacity: 0 !important;
    transform: translateX(30px) !important;
}

.animation-fade-in-right.animated {
    opacity: 1 !important;
    transform: translateX(0) !important;
}

/* Zoom In */
.animation-zoom-in {
    opacity: 0 !important;
    transform: scale(0.9) !important;
}

.animation-zoom-in.animated {
    opacity: 1 !important;
    transform: scale(1) !important;
}


/* ========================================
   CTA SPLIT SECTION STYLES
   Split layout with image and content side-by-side
   ======================================== */

.hansen-cta-split {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    min-height: 600px !important;
    width: 100% !important;
    overflow: hidden !important;
}

/* Reversed layout - image on right */
.hansen-cta-split.hansen-cta-split-reversed {
    direction: rtl !important;
}

.hansen-cta-split.hansen-cta-split-reversed > * {
    direction: ltr !important;
}

/* Image Side */
.hansen-cta-split .hansen-cta-split-image,
.hansen-cta-split-image {
    position: relative !important;
    overflow: hidden !important;
    min-height: 100% !important;
}

.hansen-cta-split .hansen-cta-split-image img,
.hansen-cta-split-image > img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
}

.hansen-cta-split .hansen-cta-split-overlay,
.hansen-cta-split-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
/*     background: linear-gradient(
        135deg,
        rgba(26, 60, 52, 0.1) 0%,
        rgba(26, 60, 52, 0.3) 100%
    ) !important; */
    pointer-events: none !important;
}

/* Content Side */
.hansen-cta-split .hansen-cta-split-content,
.hansen-cta-split-content {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 4rem !important;
    background-color: #ffffff !important;
    box-sizing: border-box !important;
}

.hansen-cta-split .hansen-cta-split-inner,
.hansen-cta-split-inner {
    max-width: 540px !important;
    width: 100% !important;
}

/* Label */
.hansen-cta-split .hansen-cta-split-label,
.hansen-cta-split-label {
    display: inline-block !important;
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    color: #b8956b !important;
    margin-bottom: 1rem !important;
}

/* Title */
.hansen-cta-split .hansen-cta-split-title,
.hansen-cta-split-title,
h2.hansen-cta-split-title {
    font-family: 'Roboto Condensed', Arial, sans-serif !important;
    font-weight: 700 !important;
    font-size: 2.5rem !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    color: #1a3c34 !important;
    margin: 0 0 1.5rem 0 !important;
    padding: 0 !important;
}

/* Description */
.hansen-cta-split .hansen-cta-split-description,
.hansen-cta-split-description {
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 1rem !important;
    line-height: 1.7 !important;
    color: #4a4845 !important;
    margin: 0 0 2rem 0 !important;
    padding: 0 !important;
}

/* Features List */
.hansen-cta-split .hansen-cta-split-features,
.hansen-cta-split-features {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
    margin-bottom: 2rem !important;
}

.hansen-cta-split .hansen-cta-split-feature,
.hansen-cta-split-feature {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
}

.hansen-cta-split .hansen-cta-split-feature svg,
.hansen-cta-split-feature > svg {
    width: 20px !important;
    height: 20px !important;
    color: var(--hansen-color-logo-green, #99CC33) !important;
    flex-shrink: 0 !important;
}

.hansen-cta-split .hansen-cta-split-feature span,
.hansen-cta-split-feature > span {
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 0.9375rem !important;
    color: #4a4845 !important;
}

/* Buttons Container */
.hansen-cta-split .hansen-cta-split-buttons,
.hansen-cta-split-buttons {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 1rem !important;
}

/* Responsive - Tablet */
@media (max-width: 1024px) {
    .hansen-cta-split {
        grid-template-columns: 1fr !important;
        min-height: auto !important;
    }
    
    .hansen-cta-split.hansen-cta-split-reversed {
        direction: ltr !important;
    }
    
    .hansen-cta-split .hansen-cta-split-image,
    .hansen-cta-split-image {
        min-height: 400px !important;
        order: -1 !important;
    }
    
    .hansen-cta-split .hansen-cta-split-content,
    .hansen-cta-split-content {
        padding: 3rem 2rem !important;
    }
    
    .hansen-cta-split .hansen-cta-split-title,
    .hansen-cta-split-title,
    h2.hansen-cta-split-title {
        font-size: 2rem !important;
    }
}

/* Responsive - Mobile */
@media (max-width: 768px) {
    .hansen-cta-split .hansen-cta-split-image,
    .hansen-cta-split-image {
        min-height: 300px !important;
    }
    
    .hansen-cta-split .hansen-cta-split-content,
    .hansen-cta-split-content {
        padding: 2.5rem 1.5rem !important;
    }
    
    .hansen-cta-split .hansen-cta-split-inner,
    .hansen-cta-split-inner {
        max-width: 100% !important;
    }
    
    .hansen-cta-split .hansen-cta-split-title,
    .hansen-cta-split-title,
    h2.hansen-cta-split-title {
        font-size: 1.75rem !important;
    }
    
    .hansen-cta-split .hansen-cta-split-description,
    .hansen-cta-split-description {
        font-size: 0.9375rem !important;
    }
    
    .hansen-cta-split .hansen-cta-split-buttons,
    .hansen-cta-split-buttons {
        flex-direction: column !important;
    }
    
    .hansen-cta-split .hansen-cta-split-buttons .hansen-btn,
    .hansen-cta-split-buttons > .hansen-btn {
        width: 100% !important;
        justify-content: center !important;
    }
}


/* ========================================
   CTA BANNER STYLES
   Full-width centered call-to-action section
   ======================================== */

/* Container */
.hansen-cta-banner {
    position: relative !important;
    padding: 6rem 0 !important;
    color: #ffffff !important;
    overflow: hidden !important;
}

/* Background variants */
.hansen-cta-banner-bg-primary {
    background-color: #1a3c34 !important;
}

.hansen-cta-banner-bg-accent {
    background-color: #b8956b !important;
}

.hansen-cta-banner-bg-dark {
    background-color: #1a1a1a !important;
}

/* Decorative gradient overlay */
.hansen-cta-banner::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: 50% !important;
    height: 100% !important;
    background: linear-gradient(135deg, transparent 0%, rgba(184, 149, 107, 0.1) 100%) !important;
    pointer-events: none !important;
}

/* Inner container */
.hansen-cta-banner-inner {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 1.5rem !important;
}

/* Content */
.hansen-cta-banner-content {
    position: relative !important;
    text-align: center !important;
    margin: 0 auto !important;
}

/* Title */
.hansen-cta-banner .hansen-cta-banner-title,
.hansen-cta-banner-content .hansen-cta-banner-title,
h2.hansen-cta-banner-title {
    font-family: 'Roboto Condensed', sans-serif !important;
    font-size: 2.5rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    margin: 0 0 1.5rem 0 !important;
    line-height: 1.2 !important;
}

/* Description */
.hansen-cta-banner .hansen-cta-banner-description,
.hansen-cta-banner-content .hansen-cta-banner-description,
p.hansen-cta-banner-description {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 1.125rem !important;
    color: rgba(255, 255, 255, 0.9) !important;
    margin: 0 0 2.5rem 0 !important;
    line-height: 1.7 !important;
}

/* Buttons container */
.hansen-cta-banner-buttons {
    display: flex !important;
    justify-content: center !important;
    gap: 1rem !important;
    flex-wrap: wrap !important;
}

/* Button base styles */
.hansen-cta-banner-buttons .hansen-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 1rem 2rem !important;
    font-family: 'DM Sans', sans-serif !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    text-decoration: none !important;
    border-radius: 4px !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
}

/* White button (primary action on dark bg) */
.hansen-cta-banner-buttons .hansen-btn-white {
    background-color: #ffffff !important;
    color: #1a3c34 !important;
    border: 2px solid #ffffff !important;
}

.hansen-cta-banner-buttons .hansen-btn-white:hover {
    background-color: transparent !important;
    color: #ffffff !important;
}

/* Outline button (secondary action on dark bg) */
.hansen-cta-banner-buttons .hansen-btn-outline {
    background-color: transparent !important;
    color: #ffffff !important;
    border: 2px solid rgba(255, 255, 255, 0.5) !important;
}

.hansen-cta-banner-buttons .hansen-btn-outline:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-color: #ffffff !important;
}

/* Primary button variant */
.hansen-cta-banner-buttons .hansen-btn-primary {
    background-color: #1a3c34 !important;
    color: #ffffff !important;
    border: 2px solid #1a3c34 !important;
}

.hansen-cta-banner-buttons .hansen-btn-primary:hover {
    background-color: #0f251f !important;
    border-color: #0f251f !important;
}

/* Secondary button variant */
.hansen-cta-banner-buttons .hansen-btn-secondary {
    background-color: transparent !important;
    color: #ffffff !important;
    border: 2px solid #b8956b !important;
}

.hansen-cta-banner-buttons .hansen-btn-secondary:hover {
    background-color: #b8956b !important;
}

/* Large button size */
.hansen-cta-banner-buttons .hansen-btn-lg {
    padding: 1rem 2.5rem !important;
    font-size: 0.9375rem !important;
}

/* Animation states */
.hansen-cta-banner.has-animation {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease !important;
}

.hansen-cta-banner.has-animation.animated {
    opacity: 1;
    transform: translateY(0);
}

/* Responsive - Tablet */
@media (max-width: 1024px) {
    .hansen-cta-banner {
        padding: 5rem 0 !important;
    }
}

/* Responsive - Mobile */
@media (max-width: 768px) {
    .hansen-cta-banner {
        padding: 4rem 0 !important;
    }
    
    .hansen-cta-banner .hansen-cta-banner-title,
    h2.hansen-cta-banner-title {
        font-size: 1.875rem !important;
    }
    
    .hansen-cta-banner .hansen-cta-banner-description,
    p.hansen-cta-banner-description {
        font-size: 1rem !important;
        margin-bottom: 2rem !important;
    }
    
    .hansen-cta-banner-buttons {
        flex-direction: column !important;
        align-items: center !important;
    }
    
    .hansen-cta-banner-buttons .hansen-btn {
        width: 100% !important;
        max-width: 280px !important;
    }
}


/* ========================================
   WPBAKERY EDITOR COMPATIBILITY
   Only apply in admin/editor context
   ======================================== */

/* Admin-only styling for nested elements - uses admin body class */
body.wp-admin .hansen-audience-card,
body.wp-admin .hansen-product-card,
.wpb-page-composer-wrap .hansen-audience-card,
.wpb-page-composer-wrap .hansen-product-card {
    border: 1px dashed #ccc !important;
    margin: 5px !important;
    min-height: 100px !important;
}


/* ========================================
   SECTION HEADER STYLES
   Flexible section headers with multiple alignments
   ======================================== */

.hansen-section-header {
    width: 100% !important;
    margin-bottom: 3rem !important;
    box-sizing: border-box !important;
}

/* Alignment Variants */
.hansen-section-header-center {
    text-align: center !important;
}

.hansen-section-header-left {
    text-align: left !important;
}

.hansen-section-header-right {
    text-align: right !important;
}

/* Inline CTA Layout - flex container for header with button */
.hansen-section-header-with-cta {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-end !important;
    flex-wrap: wrap !important;
    gap: 1.5rem !important;
}

.hansen-section-header-with-cta .hansen-section-header-content {
    flex: 1 !important;
    min-width: 0 !important;
}

/* Label */
.hansen-section-header .hansen-section-label,
.hansen-section-label {
    display: block !important;
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.15em !important;
    color: #b8956b !important;
    margin-bottom: 0.75rem !important;
}

/* Title */
.hansen-section-header .hansen-section-title,
.hansen-section-title,
h1.hansen-section-title,
h2.hansen-section-title,
h3.hansen-section-title,
h4.hansen-section-title,
h5.hansen-section-title,
h6.hansen-section-title {
    font-family: 'Roboto Condensed', Arial, sans-serif !important;
    font-weight: 700 !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    color: #1a3c34 !important;
    margin: 0 0 1rem 0 !important;
    padding: 0 !important;
}

/* Title sizes by tag */
h1.hansen-section-title {
    font-size: 3rem !important;
}

h2.hansen-section-title {
    font-size: 2.5rem !important;
}

h3.hansen-section-title {
    font-size: 2rem !important;
}

h4.hansen-section-title {
    font-size: 1.5rem !important;
}

h5.hansen-section-title {
    font-size: 1.25rem !important;
}

h6.hansen-section-title {
    font-size: 1rem !important;
}

/* Description */
.hansen-section-header .hansen-section-description,
.hansen-section-description {
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 1.0625rem !important;
    line-height: 1.7 !important;
    color: #4a4845 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Center alignment - auto margin for description */
.hansen-section-header-center .hansen-section-description {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Right alignment - margin left auto for description */
.hansen-section-header-right .hansen-section-description {
    margin-left: auto !important;
}

/* Button spacing when not inline */
.hansen-section-header:not(.hansen-section-header-with-cta) .hansen-btn {
    margin-top: 1.5rem !important;
}

/* Responsive - Tablet */
@media (max-width: 1024px) {
    .hansen-section-header {
        margin-bottom: 2.5rem !important;
    }
    
    h1.hansen-section-title {
        font-size: 2.5rem !important;
    }
    
    h2.hansen-section-title {
        font-size: 2rem !important;
    }
    
    h3.hansen-section-title {
        font-size: 1.75rem !important;
    }
}

/* Responsive - Mobile */
@media (max-width: 768px) {
    .hansen-section-header {
        margin-bottom: 2rem !important;
    }
    
    /* Stack inline CTA on mobile */
    .hansen-section-header-with-cta {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 1rem !important;
    }
    
    .hansen-section-header-with-cta.hansen-section-header-left {
        align-items: flex-start !important;
    }
    
    .hansen-section-header-with-cta.hansen-section-header-center {
        align-items: center !important;
    }
    
    .hansen-section-header-with-cta.hansen-section-header-right {
        align-items: flex-end !important;
    }
    
    h1.hansen-section-title {
        font-size: 2rem !important;
    }
    
    h2.hansen-section-title {
        font-size: 1.75rem !important;
    }
    
    h3.hansen-section-title {
        font-size: 1.5rem !important;
    }
    
    h4.hansen-section-title {
        font-size: 1.25rem !important;
    }
    
    .hansen-section-header .hansen-section-description,
    .hansen-section-description {
        font-size: 1rem !important;
    }
    
    .hansen-section-label {
        font-size: 0.6875rem !important;
    }
}


/* ========================================
   BRAND STORY STYLES
   Two-column layout with content and image featuring stat badge
   ======================================== */

.hansen-brand-story {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 4rem !important;
    align-items: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Image on left variant */
.hansen-brand-story.hansen-brand-story-image-left {
    direction: rtl !important;
}

.hansen-brand-story.hansen-brand-story-image-left > * {
    direction: ltr !important;
}

/* Content Side */
.hansen-brand-story .hansen-brand-story-content,
.hansen-brand-story-content {
    display: flex !important;
    flex-direction: column !important;
}

.hansen-brand-story .hansen-brand-story-title,
.hansen-brand-story-title,
h2.hansen-brand-story-title {
    font-family: 'Roboto Condensed', Arial, sans-serif !important;
    font-weight: 700 !important;
    font-size: 2.25rem !important;
    line-height: 1.2 !important;
    color: #1a3c34 !important;
    margin: 0 0 1.5rem 0 !important;
    padding: 0 !important;
}

.hansen-brand-story .hansen-brand-story-text,
.hansen-brand-story-text {
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

.hansen-brand-story .hansen-brand-story-text p,
.hansen-brand-story-text p {
    font-size: 1rem !important;
    line-height: 1.7 !important;
    color: #4a4845 !important;
    margin: 0 0 1rem 0 !important;
    padding: 0 !important;
}

.hansen-brand-story .hansen-brand-story-text p:last-child,
.hansen-brand-story-text p:last-child {
    margin-bottom: 0 !important;
}

/* Image Side */
.hansen-brand-story .hansen-brand-story-image-wrap,
.hansen-brand-story-image-wrap {
    position: relative !important;
}

.hansen-brand-story .hansen-brand-story-image,
.hansen-brand-story-image,
img.hansen-brand-story-image {
    width: 100% !important;
    height: auto !important;
    border-radius: 1rem !important;
    display: block !important;
    object-fit: cover !important;
}

/* Stat Badge */
.hansen-brand-story .hansen-brand-story-badge,
.hansen-brand-story-badge {
    position: absolute !important;
    background: #1a3c34 !important;
    color: #ffffff !important;
    padding: 1.5rem !important;
    border-radius: 1rem !important;
    display: flex !important;
    flex-direction: column !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
    z-index: 2 !important;
}

/* Badge Positions */
.hansen-brand-story-badge-bottom-left {
    bottom: -20px !important;
    left: -20px !important;
}

.hansen-brand-story-badge-bottom-right {
    bottom: -20px !important;
    right: -20px !important;
}

.hansen-brand-story-badge-top-left {
    top: -20px !important;
    left: -20px !important;
}

.hansen-brand-story-badge-top-right {
    top: -20px !important;
    right: -20px !important;
}

.hansen-brand-story .hansen-brand-story-badge-number,
.hansen-brand-story-badge-number {
    font-family: 'Roboto Condensed', Arial, sans-serif !important;
    font-weight: 700 !important;
    font-size: 3rem !important;
    line-height: 1 !important;
    color: #ffffff !important;
    display: block !important;
}

.hansen-brand-story .hansen-brand-story-badge-text,
.hansen-brand-story-badge-text {
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 0.875rem !important;
    color: rgba(255, 255, 255, 0.9) !important;
    margin-top: 0.25rem !important;
}

/* Responsive - Tablet */
@media (max-width: 1024px) {
    .hansen-brand-story {
        gap: 3rem !important;
    }
    
    .hansen-brand-story .hansen-brand-story-title,
    .hansen-brand-story-title,
    h2.hansen-brand-story-title {
        font-size: 2rem !important;
    }
    
    .hansen-brand-story .hansen-brand-story-badge,
    .hansen-brand-story-badge {
        padding: 1.25rem !important;
    }
    
    .hansen-brand-story .hansen-brand-story-badge-number,
    .hansen-brand-story-badge-number {
        font-size: 2.5rem !important;
    }
}

/* Responsive - Mobile */
@media (max-width: 768px) {
    .hansen-brand-story {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }
    
    .hansen-brand-story.hansen-brand-story-image-left {
        direction: ltr !important;
    }
    
    /* Image comes first on mobile */
    .hansen-brand-story .hansen-brand-story-image-wrap,
    .hansen-brand-story-image-wrap {
        order: -1 !important;
    }
    
    .hansen-brand-story .hansen-brand-story-title,
    .hansen-brand-story-title,
    h2.hansen-brand-story-title {
        font-size: 1.75rem !important;
    }
    
    .hansen-brand-story .hansen-brand-story-text p,
    .hansen-brand-story-text p {
        font-size: 0.9375rem !important;
    }
    
    /* Adjust badge position on mobile */
    .hansen-brand-story-badge-bottom-left,
    .hansen-brand-story-badge-bottom-right {
        bottom: -15px !important;
    }
    
    .hansen-brand-story-badge-bottom-left {
        left: 15px !important;
    }
    
    .hansen-brand-story-badge-bottom-right {
        right: 15px !important;
    }
    
    .hansen-brand-story-badge-top-left,
    .hansen-brand-story-badge-top-right {
        top: -15px !important;
    }
    
    .hansen-brand-story-badge-top-left {
        left: 15px !important;
    }
    
    .hansen-brand-story-badge-top-right {
        right: 15px !important;
    }
    
    .hansen-brand-story .hansen-brand-story-badge,
    .hansen-brand-story-badge {
        padding: 1rem !important;
    }
    
    .hansen-brand-story .hansen-brand-story-badge-number,
    .hansen-brand-story-badge-number {
        font-size: 2rem !important;
    }
    
    .hansen-brand-story .hansen-brand-story-badge-text,
    .hansen-brand-story-badge-text {
        font-size: 0.75rem !important;
    }
}


/* ========================================
   PRINT STYLES
   ======================================== */

@media print {
    .hansen-audience-card,
    .hansen-product-card {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid #ccc;
    }
    
    .hansen-product-card-overlay {
        display: none;
    }
    
    .hansen-product-card-content {
        position: static;
        color: #000;
        background: #f5f5f5;
    }
    
    .hansen-product-card-title,
    .hansen-product-card-description,
    .hansen-product-card-label,
    .hansen-product-card-link {
        color: #000;
    }
}


/* ========================================
   MODERN FOOTER STYLES
   Full-featured footer with newsletter, contact cards, menus
   ======================================== */

.hansen-footer-modern {
    position: relative !important;
    background: linear-gradient(180deg, #1a1a1a 0%, #111111 100%) !important;
    color: #ffffff !important;
    width: 100% !important;
}

.hansen-footer-container {
    max-width: 1280px !important;
    margin: 0 auto !important;
    padding: 0 2rem !important;
    box-sizing: border-box !important;
}

/* ========== NEWSLETTER SECTION ========== */
.hansen-footer-newsletter {
    background: linear-gradient(135deg, #1a3c34 0%, #1f4a40 100%) !important;
    padding: 4rem 0 !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Animated Pattern Background */
.hansen-footer-newsletter::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: 50% !important;
    height: 100% !important;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") !important;
    opacity: 0.5 !important;
    pointer-events: none !important;
}

.hansen-newsletter-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 2rem !important;
    position: relative !important;
    z-index: 1 !important;
}

.hansen-newsletter-content {
    flex: 1 !important;
}

.hansen-newsletter-label {
    display: inline-block !important;
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.15em !important;
    color: var(--hansen-color-logo-green, #99CC33) !important;
    margin-bottom: 0.5rem !important;
}

.hansen-newsletter-title {
    font-family: 'Roboto Condensed', Arial, sans-serif !important;
    font-weight: 700 !important;
    font-size: 1.75rem !important;
    font-weight: 400 !important;
    color: #ffffff !important;
    margin: 0 !important;
    line-height: 1.3 !important;
}

.hansen-newsletter-form {
    display: flex !important;
    gap: 0.75rem !important;
    flex: 1 !important;
    max-width: 480px !important;
}

.hansen-newsletter-input {
    flex: 1 !important;
    padding: 1rem 1.25rem !important;
    border: none !important;
    border-radius: 0.25rem !important;
    background: #ffffff !important;
    color: #1a1a1a !important;
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 1rem !important;
    transition: all 0.15s ease !important;
}

.hansen-newsletter-input::placeholder {
    color: #9a9590 !important;
}

.hansen-newsletter-input:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(153, 204, 51, 0.4) !important;
}

.hansen-newsletter-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    padding: 1rem 1.5rem !important;
    background-color: #b8956b !important;
    color: #1a3c34 !important;
    border: none !important;
    border-radius: 0.25rem !important;
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.075em !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    white-space: nowrap !important;
}

.hansen-newsletter-btn:hover {
    background-color: #d4b896 !important;
    transform: translateX(4px) !important;
}

.hansen-newsletter-btn svg {
    transition: transform 0.15s ease !important;
}

.hansen-newsletter-btn:hover svg {
    transform: translateX(4px) !important;
}

/* Fluent Forms / Custom Form Integration */
.hansen-newsletter-form-wrapper {
    flex-shrink: 0 !important;
}

/* Style Fluent Forms within newsletter section */
.hansen-newsletter-form-wrapper .fluentform,
.hansen-newsletter-form-wrapper .frm-fluent-form {
    display: flex !important;
    gap: 0.75rem !important;
}

.hansen-newsletter-form-wrapper .ff-el-group {
    margin-bottom: 0 !important;
}

.hansen-newsletter-form-wrapper .ff-el-input--content input[type="email"],
.hansen-newsletter-form-wrapper .ff-el-input--content input[type="text"] {
    padding: 1rem 1.25rem !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 0.25rem !important;
    background: rgba(255, 255, 255, 0.05) !important;
    color: #ffffff !important;
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 0.875rem !important;
    min-width: 280px !important;
    transition: all 0.15s ease !important;
}

.hansen-newsletter-form-wrapper .ff-el-input--content input::placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
}

.hansen-newsletter-form-wrapper .ff-el-input--content input:focus {
    outline: none !important;
    border-color: #b8956b !important;
    background: rgba(255, 255, 255, 0.1) !important;
}

.hansen-newsletter-form-wrapper .ff-btn-submit,
.hansen-newsletter-form-wrapper button[type="submit"] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    padding: 1rem 1.5rem !important;
    background-color: #b8956b !important;
    color: #1a3c34 !important;
    border: none !important;
    border-radius: 0.25rem !important;
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
}

.hansen-newsletter-form-wrapper .ff-btn-submit:hover,
.hansen-newsletter-form-wrapper button[type="submit"]:hover {
    background-color: #d4b896 !important;
}

/* Hide Fluent Forms labels in newsletter context */
.hansen-newsletter-form-wrapper .ff-el-input--label {
    display: none !important;
}

/* Success/Error messages */
.hansen-newsletter-form-wrapper .ff-message-success {
    color: var(--hansen-color-logo-green, #99CC33) !important;
    background: rgba(153, 204, 51, 0.1) !important;
    border-color: rgba(153, 204, 51, 0.3) !important;
    padding: 1rem !important;
    border-radius: 0.25rem !important;
}

.hansen-newsletter-form-wrapper .ff-errors-in-stack {
    color: #ff6b6b !important;
    font-size: 0.8125rem !important;
}

/* ========== CONTACT CARDS SECTION ========== */
.hansen-footer-contact-cards {
    padding: 3rem 0 !important;
    background: rgba(255, 255, 255, 0.02) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.hansen-contact-cards-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 1.5rem !important;
}

.hansen-contact-card {
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
    padding: 1.25rem 1.5rem !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 1rem !important;
    text-decoration: none !important;
    color: inherit !important;
    transition: all 0.3s ease !important;
}

a.hansen-contact-card:hover,
.hansen-contact-card:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: var(--hansen-color-logo-green, #99CC33) !important;
    transform: translateY(-4px) !important;
}

.hansen-contact-card-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 48px !important;
    height: 48px !important;
    background: linear-gradient(135deg, #b8956b 0%, #8a6f50 100%) !important;
    border-radius: 9999px !important;
    color: #ffffff !important;
    flex-shrink: 0 !important;
}

.hansen-contact-card-icon svg {
    width: 24px !important;
    height: 24px !important;
}

.hansen-contact-card-content {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.25rem !important;
}

.hansen-contact-card-label {
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.075em !important;
    color: #9a9590 !important;
}

.hansen-contact-card-value {
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    color: #ffffff !important;
}

/* ========== MAIN FOOTER CONTENT ========== */
.hansen-footer-main {
    padding: 4rem 0 !important;
}

.hansen-footer-grid-modern {
    display: grid !important;
    grid-template-columns: 2fr repeat(4, 1fr) !important;
    gap: 3rem !important;
}

/* Brand Column - Modern */
.hansen-footer-brand-modern {
    padding-right: 2rem !important;
}

.hansen-footer-logo {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    margin-bottom: 1.25rem !important;
}

.hansen-footer-logo-image {
    max-height: 48px !important;
    width: auto !important;
}

.hansen-footer-logo-icon {
    width: 40px !important;
    height: 40px !important;
    background-color: #b8956b !important;
    color: #1a3c34 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: 'Roboto Condensed', Arial, sans-serif !important;
    font-weight: 700 !important;
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    border-radius: 0.25rem !important;
    flex-shrink: 0 !important;
}

.hansen-footer-logo-text {
    font-family: 'Roboto Condensed', Arial, sans-serif !important;
    font-weight: 700 !important;
    font-size: 1.25rem !important;
    font-weight: 500 !important;
    color: #ffffff !important;
}

.hansen-footer-tagline {
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 1rem !important;
    line-height: 1.7 !important;
    color: #9a9590 !important;
    margin: 0 0 1.5rem 0 !important;
    padding: 0px;
}

/* Heritage Badge */
.hansen-footer-heritage {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
    margin-bottom: 2rem !important;
    padding: 1.25rem !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 0.5rem !important;
}

.hansen-heritage-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    color: #b8956b !important;
}

.hansen-heritage-badge svg {
    color: #b8956b !important;
}

.hansen-heritage-text {
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 0.875rem !important;
    color: #9a9590 !important;
}

/* Social Links - Modern */
.hansen-footer-social-modern {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
}

.hansen-social-label {
    display: block !important;
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.15em !important;
    color: #9a9590 !important;
}

.hansen-social-links {
    display: flex !important;
    gap: 0.75rem !important;
}

.hansen-social-link {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 0.5rem !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    transition: all 0.15s ease !important;
}

.hansen-social-link:hover {
    background-color: var(--hansen-color-logo-green, #99CC33) !important;
    border-color: var(--hansen-color-logo-green, #99CC33) !important;
    color: var(--hansen-color-primary-dark, #0f251f) !important;
    transform: translateY(-2px) !important;
}

.hansen-social-link svg {
    width: 20px !important;
    height: 20px !important;
}

/* Navigation Columns */
.hansen-footer-nav-column {
    min-width: 0 !important;
}

.hansen-footer-nav-heading {
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
    color: #ffffff !important;
    margin: 0 0 1.5rem 0 !important;
    padding: 0 0 0.75rem 0 !important;
    border-bottom: 2px solid #b8956b !important;
    display: inline-block !important;
    line-height: 1em;
}

.hansen-footer-nav-links {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
}

/* Style WordPress menu items within footer nav */
.hansen-footer-nav-links a,
.hansen-footer-nav-links .menu-item a,
nav.hansen-footer-nav-links a {
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 0.875rem !important;
    color: #9a9590 !important;
    text-decoration: none !important;
    transition: all 0.15s ease !important;
    display: block !important;
    padding: 0 !important;
    padding-left: 0 !important;
    margin: 0 !important;
    line-height: 1.5 !important;
    position: relative !important;
}

/* Animated bullet on hover */
.hansen-footer-nav-links a::before,
.hansen-footer-nav-links .menu-item a::before,
nav.hansen-footer-nav-links a::before {
    content: '' !important;
    position: absolute !important;
    left: -12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 4px !important;
    height: 4px !important;
    background: var(--hansen-color-logo-green, #99CC33) !important;
    border-radius: 9999px !important;
    opacity: 0 !important;
    transition: all 0.15s ease !important;
}

.hansen-footer-nav-links a:hover,
.hansen-footer-nav-links .menu-item a:hover,
nav.hansen-footer-nav-links a:hover {
    color: #d4b896 !important;
    padding-left: 1rem !important;
}

.hansen-footer-nav-links a:hover::before,
.hansen-footer-nav-links .menu-item a:hover::before,
nav.hansen-footer-nav-links a:hover::before {
    opacity: 1 !important;
    left: 0 !important;
}

/* Remove default WordPress menu styling */
.hansen-footer-nav-links .menu-item {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.hansen-footer-nav-links ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ========== FOOTER BOTTOM ========== */
.hansen-footer-bottom-modern {
    padding: 1.5rem 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    background: rgba(0, 0, 0, 0.2) !important;
}

.hansen-footer-bottom-inner {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 1.5rem !important;
}

.hansen-footer-copyright-modern {
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 0.875rem !important;
    color: #9a9590 !important;
    margin: 0 !important;
    padding-bottom: 0px;
}

/* Legal Links */
.hansen-footer-legal-links {
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
}

.hansen-footer-legal-links a,
.hansen-footer-legal-links .menu-item a,
nav.hansen-footer-legal-links a {
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 0.875rem !important;
    color: #9a9590 !important;
    text-decoration: none !important;
    transition: color 0.15s ease !important;
}

.hansen-footer-legal-links a:hover,
.hansen-footer-legal-links .menu-item a:hover,
nav.hansen-footer-legal-links a:hover {
    color: #d4b896 !important;
}

.hansen-footer-legal-links .menu-item {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
}

.hansen-footer-legal-links .menu-item::after {
    content: '|' !important;
    color: rgba(255, 255, 255, 0.2) !important;
    margin: 0 0 0 1rem !important;
}

.hansen-footer-legal-links .menu-item:last-child::after {
    display: none !important;
}

.hansen-footer-legal-links ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
}

/* ========== FOOTER RESPONSIVE ========== */
@media (max-width: 1024px) {
    .hansen-newsletter-inner {
        flex-direction: column !important;
        text-align: center !important;
    }
    
    .hansen-newsletter-form {
        max-width: 100% !important;
    }
    
    .hansen-newsletter-title {
        font-size: 1.5rem !important;
    }
    
    .hansen-contact-cards-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .hansen-footer-grid-modern {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 2.5rem !important;
    }
    
    .hansen-footer-brand-modern {
        grid-column: 1 / -1 !important;
        padding-right: 0 !important;
        text-align: center !important;
    }
    
    .hansen-footer-logo {
        justify-content: center !important;
    }
    
    .hansen-footer-heritage {
        align-items: center !important;
        text-align: center !important;
    }
    
    .hansen-footer-tagline {
        max-width: 500px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    .hansen-footer-social-modern {
        align-items: center !important;
    }
    
    .hansen-social-links {
        justify-content: center !important;
    }
    
    .hansen-footer-nav-heading {
        font-size: 0.75rem !important;
    }
}

@media (max-width: 768px) {
    .hansen-footer-newsletter {
        padding: 2.5rem 0 !important;
    }
    
    .hansen-newsletter-title {
        font-size: 1.25rem !important;
    }
    
    .hansen-newsletter-form {
        flex-direction: column !important;
        width: 100% !important;
        max-width: 400px !important;
    }
    
    .hansen-newsletter-form-wrapper {
        width: 100% !important;
        max-width: 400px !important;
    }
    
    .hansen-newsletter-form-wrapper .fluentform,
    .hansen-newsletter-form-wrapper .frm-fluent-form {
        flex-direction: column !important;
    }
    
    .hansen-newsletter-form-wrapper .ff-el-input--content input[type="email"],
    .hansen-newsletter-form-wrapper .ff-el-input--content input[type="text"] {
        min-width: 100% !important;
        width: 100% !important;
    }
    
    .hansen-newsletter-input {
        min-width: 100% !important;
    }
    
    .hansen-contact-cards-grid {
        grid-template-columns: 1fr !important;
    }
    
    .hansen-footer-main {
        padding: 3rem 0 !important;
    }
    
    .hansen-footer-container {
        padding: 0 1.5rem !important;
    }
    
    .hansen-footer-grid-modern {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
        text-align: center !important;
    }
    
    .hansen-footer-nav-column {
        text-align: center !important;
    }
    
    .hansen-footer-nav-heading {
        display: inline-block !important;
    }
    
    .hansen-footer-nav-links {
        align-items: center !important;
    }
    
    /* Disable bullet animation on mobile for centered layout */
    .hansen-footer-nav-links a::before,
    .hansen-footer-nav-links .menu-item a::before,
    nav.hansen-footer-nav-links a::before {
        display: none !important;
    }
    
    .hansen-footer-nav-links a:hover,
    .hansen-footer-nav-links .menu-item a:hover,
    nav.hansen-footer-nav-links a:hover {
        padding-left: 0 !important;
    }
    
    .hansen-footer-bottom-inner {
        flex-direction: column !important;
        gap: 1rem !important;
        text-align: center !important;
    }
    
    .hansen-footer-legal-links {
        flex-wrap: wrap !important;
        justify-content: center !important;
    }
}

@media (max-width: 480px) {
    .hansen-contact-card {
        padding: 1rem !important;
    }
    
    .hansen-contact-card-icon {
        width: 40px !important;
        height: 40px !important;
    }
    
    .hansen-contact-card-icon svg {
        width: 20px !important;
        height: 20px !important;
    }
    
    .hansen-contact-card-value {
        font-size: 0.875rem !important;
    }
}


/* ========================================
   TIMELINE STYLES
   Vertical timeline with year markers and milestones
   ======================================== */

.hansen-timeline {
    margin: 0 auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Timeline Item */
.hansen-timeline .hansen-timeline-item,
.hansen-timeline-item {
    display: flex !important;
    gap: 2rem !important;
    margin-bottom: 2.5rem !important;
}

/* Last item - no margin bottom */
.hansen-timeline .hansen-timeline-item-last,
.hansen-timeline-item-last {
    margin-bottom: 0 !important;
}

/* Year Column */
.hansen-timeline .hansen-timeline-year,
.hansen-timeline-year {
    flex-shrink: 0 !important;
    width: 100px !important;
    text-align: right !important;
}

.hansen-timeline .hansen-timeline-year span,
.hansen-timeline-year > span {
    font-family: 'Roboto Condensed', Arial, sans-serif !important;
    font-weight: 700 !important;
    font-size: 1.5rem !important;
    color: #1a3c34 !important;
    line-height: 1.3 !important;
}

/* Content Column */
.hansen-timeline .hansen-timeline-content,
.hansen-timeline-content {
    flex: 1 !important;
    padding-bottom: 2.5rem !important;
    border-left: 2px solid #e8e4de !important;
    padding-left: 2rem !important;
    position: relative !important;
}

/* Last item - no border or padding bottom */
.hansen-timeline-item-last .hansen-timeline-content,
.hansen-timeline .hansen-timeline-item-last .hansen-timeline-content {
    border-left-color: transparent !important;
    padding-bottom: 0 !important;
}

/* Timeline Dot */
.hansen-timeline .hansen-timeline-dot,
.hansen-timeline-dot {
    position: absolute !important;
    left: -7px !important;
    top: 8px !important;
    width: 12px !important;
    height: 12px !important;
    background-color: #b8956b !important;
    border-radius: 9999px !important;
    z-index: 1 !important;
}

/* Current item dot - primary color */
.hansen-timeline-item-current .hansen-timeline-dot,
.hansen-timeline .hansen-timeline-item-current .hansen-timeline-dot {
    background-color: #1a3c34 !important;
}

/* Title */
.hansen-timeline .hansen-timeline-title,
.hansen-timeline-title,
h4.hansen-timeline-title {
    font-family: 'Roboto Condensed', Arial, sans-serif !important;
    font-weight: 700 !important;
    font-size: 1.125rem !important;
    line-height: 1.3 !important;
    color: #1a1a1a !important;
    margin: 0 0 0.5rem 0 !important;
    padding: 0 !important;
}

/* Description */
.hansen-timeline .hansen-timeline-description,
.hansen-timeline-description {
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 0.875rem !important;
    line-height: 1.6 !important;
    color: #4a4845 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Responsive - Tablet */
@media (max-width: 1024px) {
    .hansen-timeline .hansen-timeline-year,
    .hansen-timeline-year {
        width: 80px !important;
    }
    
    .hansen-timeline .hansen-timeline-year span,
    .hansen-timeline-year > span {
        font-size: 1.25rem !important;
    }
    
    .hansen-timeline .hansen-timeline-item,
    .hansen-timeline-item {
        gap: 1.5rem !important;
    }
    
    .hansen-timeline .hansen-timeline-content,
    .hansen-timeline-content {
        padding-left: 1.5rem !important;
    }
}

/* Responsive - Mobile */
@media (max-width: 768px) {
    .hansen-timeline .hansen-timeline-item,
    .hansen-timeline-item {
        flex-direction: column !important;
        gap: 0.5rem !important;
        margin-bottom: 2rem !important;
    }
    
    .hansen-timeline .hansen-timeline-year,
    .hansen-timeline-year {
        width: auto !important;
        text-align: left !important;
    }
    
    .hansen-timeline .hansen-timeline-year span,
    .hansen-timeline-year > span {
        font-size: 1.125rem !important;
        color: #b8956b !important;
    }
    
    .hansen-timeline .hansen-timeline-content,
    .hansen-timeline-content {
        padding-left: 1.5rem !important;
        padding-bottom: 0 !important;
        border-left: 2px solid #e8e4de !important;
        margin-left: 0.5rem !important;
    }
    
    .hansen-timeline-item-last .hansen-timeline-content,
    .hansen-timeline .hansen-timeline-item-last .hansen-timeline-content {
        border-left-color: transparent !important;
    }
    
    .hansen-timeline .hansen-timeline-dot,
    .hansen-timeline-dot {
        left: -6px !important;
        top: 4px !important;
        width: 10px !important;
        height: 10px !important;
    }
    
    .hansen-timeline .hansen-timeline-title,
    .hansen-timeline-title,
    h4.hansen-timeline-title {
        font-size: 1rem !important;
    }
    
    .hansen-timeline .hansen-timeline-description,
    .hansen-timeline-description {
        font-size: 0.8125rem !important;
    }
}

/* WPBakery Editor Compatibility */
body.wp-admin .hansen-timeline-item,
.wpb-page-composer-wrap .hansen-timeline-item {
    border: 1px dashed #ccc !important;
    margin: 5px !important;
    min-height: 60px !important;
    padding: 10px !important;
}


/* ========================================
   CERTIFICATION BADGES STYLES
   Trust badges for certifications & partners
   ======================================== */

/* Container Grid */
.hansen-cert-badges-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 2rem 0 !important;
}

/* Alignment */
.hansen-cert-badges-align-center {
    justify-content: center !important;
}

.hansen-cert-badges-align-left {
    justify-content: flex-start !important;
}

.hansen-cert-badges-align-right {
    justify-content: flex-end !important;
}

/* Gap variations */
.hansen-cert-badges-gap-small {
    gap: 1rem !important;
}

.hansen-cert-badges-gap-default {
    gap: 1.5rem !important;
}

.hansen-cert-badges-gap-large {
    gap: 2rem !important;
}

/* Column variations - auto wraps naturally */
.hansen-cert-badges-cols-auto .hansen-cert-badge {
    flex: 0 1 auto !important;
}

.hansen-cert-badges-cols-3 {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
}

.hansen-cert-badges-cols-4 {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
}

.hansen-cert-badges-cols-5 {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
}

/* Individual Badge */
.hansen-cert-badges-grid .hansen-cert-badge,
.hansen-cert-badge,
a.hansen-cert-badge,
div.hansen-cert-badge {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 160px !important;
    min-width: 140px !important;
    background: #ffffff !important;
    border-radius: 1rem !important;
    padding: 1.5rem !important;
    text-align: center !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
    border: 1px solid #e8e4de !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
}

/* Grid columns override width */
.hansen-cert-badges-cols-3 .hansen-cert-badge,
.hansen-cert-badges-cols-4 .hansen-cert-badge,
.hansen-cert-badges-cols-5 .hansen-cert-badge {
    width: 100% !important;
}

/* Hover states */
.hansen-cert-badges-grid .hansen-cert-badge:hover,
.hansen-cert-badge:hover,
a.hansen-cert-badge:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
    border-color: #1a3c34 !important;
}

/* Icon container */
.hansen-cert-badge .hansen-cert-badge-icon,
.hansen-cert-badge-icon {
    width: 64px !important;
    height: 64px !important;
    margin: 0 auto 1rem auto !important;
    border-radius: 9999px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: transform 0.3s ease !important;
}

/* Icon hover scale */
.hansen-cert-badge:hover .hansen-cert-badge-icon {
    transform: scale(1.05) !important;
}

/* Icon SVG styling */
.hansen-cert-badge-icon svg {
    width: 32px !important;
    height: 32px !important;
    color: #ffffff !important;
    stroke: currentColor !important;
}

/* Title */
.hansen-cert-badge .hansen-cert-badge-title,
.hansen-cert-badge-title,
h4.hansen-cert-badge-title {
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    color: #1a1a1a !important;
    margin: 0 0 0.25rem 0 !important;
    padding: 0 !important;
}

/* Subtitle */
.hansen-cert-badge .hansen-cert-badge-subtitle,
.hansen-cert-badge-subtitle {
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 0.75rem !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    color: #9a9590 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Link styling - ensure no underline from theme */
a.hansen-cert-badge,
a.hansen-cert-badge:hover,
a.hansen-cert-badge:focus,
a.hansen-cert-badge:visited {
    text-decoration: none !important;
}

a.hansen-cert-badge .hansen-cert-badge-title,
a.hansen-cert-badge:hover .hansen-cert-badge-title {
    color: #1a1a1a !important;
    text-decoration: none !important;
}

/* Responsive - Tablet */
@media (max-width: 1024px) {
    .hansen-cert-badges-cols-5 {
        grid-template-columns: repeat(4, 1fr) !important;
    }
    
    .hansen-cert-badges-cols-4 {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    
    .hansen-cert-badges-grid .hansen-cert-badge,
    .hansen-cert-badge {
        width: 140px !important;
        min-width: 120px !important;
        padding: 1.25rem !important;
    }
    
    .hansen-cert-badge .hansen-cert-badge-icon,
    .hansen-cert-badge-icon {
        width: 56px !important;
        height: 56px !important;
    }
    
    .hansen-cert-badge-icon svg {
        width: 28px !important;
        height: 28px !important;
    }
}

/* Responsive - Mobile */
@media (max-width: 768px) {
    .hansen-cert-badges-grid {
        padding: 1.5rem 0 !important;
    }
    
    .hansen-cert-badges-cols-5,
    .hansen-cert-badges-cols-4,
    .hansen-cert-badges-cols-3 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .hansen-cert-badges-gap-default,
    .hansen-cert-badges-gap-large {
        gap: 1rem !important;
    }
    
    .hansen-cert-badges-grid .hansen-cert-badge,
    .hansen-cert-badge,
    .hansen-cert-badges-cols-3 .hansen-cert-badge,
    .hansen-cert-badges-cols-4 .hansen-cert-badge,
    .hansen-cert-badges-cols-5 .hansen-cert-badge {
        width: 100% !important;
        min-width: unset !important;
        padding: 1rem !important;
    }
    
    .hansen-cert-badge .hansen-cert-badge-icon,
    .hansen-cert-badge-icon {
        width: 48px !important;
        height: 48px !important;
        margin-bottom: 0.75rem !important;
    }
    
    .hansen-cert-badge-icon svg {
        width: 24px !important;
        height: 24px !important;
    }
    
    .hansen-cert-badge .hansen-cert-badge-title,
    .hansen-cert-badge-title,
    h4.hansen-cert-badge-title {
        font-size: 0.875rem !important;
    }
    
    .hansen-cert-badge .hansen-cert-badge-subtitle,
    .hansen-cert-badge-subtitle {
        font-size: 0.6875rem !important;
    }
}

/* Small Mobile */
@media (max-width: 480px) {
    .hansen-cert-badges-cols-5,
    .hansen-cert-badges-cols-4,
    .hansen-cert-badges-cols-3 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    /* Stack to single column only for very narrow screens */
    @media (max-width: 360px) {
        .hansen-cert-badges-cols-5,
        .hansen-cert-badges-cols-4,
        .hansen-cert-badges-cols-3 {
            grid-template-columns: 1fr !important;
        }
    }
}

/* WPBakery Editor Compatibility */
body.wp-admin .hansen-cert-badge,
.wpb-page-composer-wrap .hansen-cert-badge {
    border: 1px dashed #ccc !important;
    margin: 5px !important;
    min-height: 80px !important;
}


/* ========================================
   CONTACT INFO STYLES
   Flexible contact info list with icons
   ======================================== */

/* Container */
.hansen-contact-info {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Layout: Horizontal */
.hansen-contact-info-layout-horizontal {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
}

/* Gap Options */
.hansen-contact-info-gap-none {
    gap: 0 !important;
}

.hansen-contact-info-gap-small {
    gap: 0.75rem !important;
}

.hansen-contact-info-gap-default {
    gap: 1rem !important;
}

.hansen-contact-info-gap-large {
    gap: 1.5rem !important;
}

/* Horizontal layout gap adjustments */
.hansen-contact-info-layout-horizontal.hansen-contact-info-gap-small {
    gap: 1rem 2rem !important;
}

.hansen-contact-info-layout-horizontal.hansen-contact-info-gap-default {
    gap: 1rem 2.5rem !important;
}

.hansen-contact-info-layout-horizontal.hansen-contact-info-gap-large {
    gap: 1.5rem 3rem !important;
}

/* Dividers */
.hansen-contact-info-has-dividers .hansen-contact-info-item {
    padding-bottom: 1rem !important;
    border-bottom: 1px solid #e8e4de !important;
}

.hansen-contact-info-has-dividers .hansen-contact-info-item:last-child {
    padding-bottom: 0 !important;
    border-bottom: none !important;
}

.hansen-contact-info-layout-horizontal.hansen-contact-info-has-dividers .hansen-contact-info-item {
    padding-bottom: 0 !important;
    padding-right: 2rem !important;
    border-bottom: none !important;
    border-right: 1px solid #e8e4de !important;
}

.hansen-contact-info-layout-horizontal.hansen-contact-info-has-dividers .hansen-contact-info-item:last-child {
    padding-right: 0 !important;
    border-right: none !important;
}

/* Icon Colors */
.hansen-contact-info-color-primary .hansen-contact-info-icon svg {
    stroke: #1a3c34 !important;
}

.hansen-contact-info-color-accent .hansen-contact-info-icon svg {
    stroke: #b8956b !important;
}

.hansen-contact-info-color-dark .hansen-contact-info-icon svg {
    stroke: #1a1a1a !important;
}

.hansen-contact-info-color-custom .hansen-contact-info-icon svg {
    stroke: var(--hansen-contact-icon-color, #1a3c34) !important;
}

/* Contact Info Item */
.hansen-contact-info .hansen-contact-info-item,
.hansen-contact-info-item {
    display: flex !important;
    gap: 0.75rem !important;
    align-items: flex-start !important;
}

/* Icon Container */
.hansen-contact-info-item .hansen-contact-info-icon,
.hansen-contact-info-icon {
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
}

.hansen-contact-info-icon svg {
    display: block !important;
}

/* Content Container */
.hansen-contact-info-item .hansen-contact-info-content,
.hansen-contact-info-content {
    flex: 1 !important;
    min-width: 0 !important;
}

/* Label (Bold text) */
.hansen-contact-info-item .hansen-contact-info-label,
.hansen-contact-info-label,
strong.hansen-contact-info-label {
    display: block !important;
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: #1a1a1a !important;
    margin: 0 0 0.125rem 0 !important;
    line-height: 1.4 !important;
}

/* Content Text */
.hansen-contact-info-item .hansen-contact-info-text,
.hansen-contact-info-text,
span.hansen-contact-info-text {
    display: block !important;
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-size: 0.9375rem !important;
    font-weight: 400 !important;
    color: #4a4845 !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}

/* Link styling */
.hansen-contact-info-item .hansen-contact-info-link,
.hansen-contact-info-link,
a.hansen-contact-info-link {
    color: inherit !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

.hansen-contact-info-link:hover,
a.hansen-contact-info-link:hover {
    color: #1a3c34 !important;
}

.hansen-contact-info-link:hover .hansen-contact-info-text,
a.hansen-contact-info-link:hover .hansen-contact-info-text {
    color: #1a3c34 !important;
    text-decoration: underline !important;
}

/* Without Label - adjust vertical alignment */
.hansen-contact-info-item:not(:has(.hansen-contact-info-label)) {
    align-items: center !important;
}

/* Fallback for browsers without :has() support */
.hansen-contact-info-item--no-label {
    align-items: center !important;
}

/* Responsive - Tablet */
@media (max-width: 1024px) {
    .hansen-contact-info-layout-horizontal {
        flex-direction: column !important;
    }
    
    .hansen-contact-info-layout-horizontal.hansen-contact-info-has-dividers .hansen-contact-info-item {
        padding-right: 0 !important;
        padding-bottom: 1rem !important;
        border-right: none !important;
        border-bottom: 1px solid #e8e4de !important;
    }
    
    .hansen-contact-info-layout-horizontal.hansen-contact-info-has-dividers .hansen-contact-info-item:last-child {
        padding-bottom: 0 !important;
        border-bottom: none !important;
    }
}

/* Responsive - Mobile */
@media (max-width: 768px) {
    .hansen-contact-info-gap-large {
        gap: 1rem !important;
    }
    
    .hansen-contact-info-item .hansen-contact-info-label,
    .hansen-contact-info-label {
        font-size: 0.9375rem !important;
    }
    
    .hansen-contact-info-item .hansen-contact-info-text,
    .hansen-contact-info-text {
        font-size: 0.875rem !important;
    }
}

/* WPBakery Editor Compatibility */
body.wp-admin .hansen-contact-info-item,
.wpb-page-composer-wrap .hansen-contact-info-item {
    border: 1px dashed #ccc !important;
    margin: 5px !important;
    min-height: 40px !important;
    padding: 10px !important;
}


/* ========================================
   VALUE PILLARS STYLES
   Company values/pillars grid with icons
   ======================================== */

/* Container Grid */
.hansen-value-pillars-grid {
    display: grid !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Individual Pillar Item */
.hansen-value-pillars-grid .hansen-value-pillar,
.hansen-value-pillar,
div.hansen-value-pillar {
    text-align: center !important;
    padding: 2rem !important;
    box-sizing: border-box !important;
}

/* Icon Container */
.hansen-value-pillar .hansen-value-pillar-icon,
.hansen-value-pillar-icon {
    width: 80px !important;
    height: 80px !important;
    margin: 0 auto 1.5rem auto !important;
    background-color: #f5f3ef !important;
    border-radius: 9999px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
}

/* Icon hover effect */
.hansen-value-pillar:hover .hansen-value-pillar-icon {
    background-color: #e8e4de !important;
    transform: scale(1.05) !important;
}

/* Icon SVG */
.hansen-value-pillar-icon svg {
    width: 40px !important;
    height: 40px !important;
    stroke: #1a3c34 !important;
    color: #1a3c34 !important;
}

/* Title */
.hansen-value-pillar .hansen-value-pillar-title,
.hansen-value-pillar-title,
h3.hansen-value-pillar-title {
    font-family: 'Roboto Condensed', Arial, sans-serif !important;
    font-weight: 700 !important;
    font-size: 1.25rem !important;
    line-height: 1.3 !important;
    color: #1a1a1a !important;
    margin: 0 0 1rem 0 !important;
    padding: 0 !important;
}

/* Description */
.hansen-value-pillar .hansen-value-pillar-description,
.hansen-value-pillar-description {
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 0.875rem !important;
    line-height: 1.625 !important;
    color: #4a4845 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Responsive - Tablet */
@media (max-width: 1024px) {
    .hansen-value-pillars-grid.hansen-grid-3 {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    
    .hansen-value-pillar .hansen-value-pillar-icon,
    .hansen-value-pillar-icon {
        width: 72px !important;
        height: 72px !important;
    }
    
    .hansen-value-pillar-icon svg {
        width: 36px !important;
        height: 36px !important;
    }
    
    .hansen-value-pillar .hansen-value-pillar-title,
    .hansen-value-pillar-title,
    h3.hansen-value-pillar-title {
        font-size: 1.125rem !important;
    }
}

/* Responsive - Mobile */
@media (max-width: 768px) {
    .hansen-value-pillars-grid.hansen-grid-2,
    .hansen-value-pillars-grid.hansen-grid-3,
    .hansen-value-pillars-grid.hansen-grid-4 {
        grid-template-columns: 1fr !important;
    }
    
    .hansen-value-pillars-grid .hansen-value-pillar,
    .hansen-value-pillar {
        padding: 1.5rem !important;
    }
    
    .hansen-value-pillar .hansen-value-pillar-icon,
    .hansen-value-pillar-icon {
        width: 64px !important;
        height: 64px !important;
        margin-bottom: 1rem !important;
    }
    
    .hansen-value-pillar-icon svg {
        width: 32px !important;
        height: 32px !important;
    }
    
    .hansen-value-pillar .hansen-value-pillar-title,
    .hansen-value-pillar-title,
    h3.hansen-value-pillar-title {
        font-size: 1rem !important;
        margin-bottom: 0.75rem !important;
    }
    
    .hansen-value-pillar .hansen-value-pillar-description,
    .hansen-value-pillar-description {
        font-size: 0.8125rem !important;
    }
}

/* WPBakery Editor Compatibility */
body.wp-admin .hansen-value-pillar,
.wpb-page-composer-wrap .hansen-value-pillar {
    border: 1px dashed #ccc !important;
    margin: 5px !important;
    min-height: 100px !important;
}


/* ========================================
   INFO CARDS STYLES
   Flexible content cards for various layouts:
   - Room guides with recommended products
   - Color guides with swatches
   - Commercial projects with product details
   - Installation guides with feature lists
   - Resource cards with CTAs
   ======================================== */

/* Container Grid */
.hansen-info-cards-grid {
    display: grid !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Individual Card */
.hansen-info-cards-grid .hansen-info-card,
.hansen-info-card,
div.hansen-info-card {
    background-color: #ffffff !important;
    border-radius: 1rem !important;
    border: 1px solid #e8e4de !important;
    overflow: visible !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
}

/* Hover state */
.hansen-info-card:hover {
    border-color: #1a3c34 !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
}

/* Card Image */
.hansen-info-card .hansen-info-card-image,
.hansen-info-card-image {
    position: relative !important;
    overflow: hidden !important;
    border-radius: 1rem 1rem 0 0 !important;
    flex-shrink: 0 !important;
}

.hansen-info-card .hansen-info-card-image img,
.hansen-info-card-image > img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
    transition: transform 0.5s ease !important;
}

.hansen-info-card:hover .hansen-info-card-image img {
    transform: scale(1.05) !important;
}

/* Card Body */
.hansen-info-card .hansen-info-card-body,
.hansen-info-card-body {
    padding: 1.5rem !important;
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
    box-sizing: border-box !important;
}

/* Label/Badge */
.hansen-info-card .hansen-info-card-label,
.hansen-info-card-label {
    display: inline-block !important;
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 0.6875rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    color: #b8956b !important;
    background-color: rgba(184, 149, 107, 0.1) !important;
    padding: 0.25rem 0.75rem !important;
    border-radius: 9999px !important;
    margin-bottom: 0.75rem !important;
    width: fit-content !important;
}

/* Title */
.hansen-info-card .hansen-info-card-title,
.hansen-info-card-title,
h3.hansen-info-card-title {
    font-family: 'Roboto Condensed', Arial, sans-serif !important;
    font-weight: 700 !important;
    font-size: 1.25rem !important;
    line-height: 1.3 !important;
    color: #1a1a1a !important;
    margin: 0 0 0.75rem 0 !important;
    padding: 0 !important;
}

/* Title size variations */
.hansen-info-card-title-sm,
h3.hansen-info-card-title-sm {
    font-size: 1rem !important;
}

.hansen-info-card-title-lg,
h3.hansen-info-card-title-lg {
    font-size: 1.5rem !important;
}

/* Description */
.hansen-info-card .hansen-info-card-description,
.hansen-info-card-description {
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 0.875rem !important;
    line-height: 1.625 !important;
    color: #4a4845 !important;
    margin: 0 0 1rem 0 !important;
    padding: 0 !important;
}

/* Tags/Pills Section */
.hansen-info-card .hansen-info-card-tags,
.hansen-info-card-tags {
    margin-bottom: 1rem !important;
}

.hansen-info-card .hansen-info-card-tags-label,
.hansen-info-card-tags-label {
    display: block !important;
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    color: #1a1a1a !important;
    margin-bottom: 0.5rem !important;
}

.hansen-info-card .hansen-info-card-tags-list,
.hansen-info-card-tags-list {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
}

.hansen-info-card .hansen-info-card-tag,
.hansen-info-card-tag {
    display: inline-block !important;
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 0.8125rem !important;
    font-weight: 400 !important;
    color: #4a4845 !important;
    background-color: #f5f3ef !important;
    padding: 0.25rem 0.75rem !important;
    border-radius: 9999px !important;
}

/* Color Swatches */
.hansen-info-card .hansen-info-card-swatches,
.hansen-info-card-swatches {
    display: flex !important;
    gap: 0.5rem !important;
    margin-bottom: 1rem !important;
}

.hansen-info-card .hansen-info-card-swatch,
.hansen-info-card-swatch {
    width: 32px !important;
    height: 32px !important;
    border-radius: 0.25rem !important;
    border: 1px solid #e8e4de !important;
    flex-shrink: 0 !important;
}

/* Features List */
.hansen-info-card .hansen-info-card-features,
.hansen-info-card-features {
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
    color: #4a4845 !important;
    margin: 0 0 1rem 0 !important;
    padding-left: 1rem !important;
    list-style-type: disc !important;
}

.hansen-info-card .hansen-info-card-features li,
.hansen-info-card-features li {
    margin-bottom: 0.375rem !important;
}

.hansen-info-card .hansen-info-card-features li:last-child,
.hansen-info-card-features li:last-child {
    margin-bottom: 0 !important;
}

/* Extra Info */
.hansen-info-card .hansen-info-card-extra,
.hansen-info-card-extra {
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 0.875rem !important;
    color: #9a9590 !important;
    margin-bottom: 1rem !important;
}

.hansen-info-card .hansen-info-card-extra strong,
.hansen-info-card-extra strong {
    font-weight: 600 !important;
    color: #1a1a1a !important;
    margin-right: 0.25rem !important;
}

/* Helper Text */
.hansen-info-card .hansen-info-card-helper,
.hansen-info-card-helper {
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 0.8125rem !important;
    line-height: 1.5 !important;
    color: #9a9590 !important;
    margin: 0 0 1rem 0 !important;
    padding: 0 !important;
}

/* Button - use margin-top auto to push to bottom */
.hansen-info-card .hansen-btn,
.hansen-info-card-body .hansen-btn {
    margin-top: auto !important;
}

/* Responsive - Tablet */
@media (max-width: 1024px) {
    .hansen-info-cards-grid.hansen-grid-3 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .hansen-info-card .hansen-info-card-body,
    .hansen-info-card-body {
        padding: 1.25rem !important;
    }
    
    .hansen-info-card .hansen-info-card-title,
    .hansen-info-card-title,
    h3.hansen-info-card-title {
        font-size: 1.125rem !important;
    }
    
    .hansen-info-card-title-lg,
    h3.hansen-info-card-title-lg {
        font-size: 1.375rem !important;
    }
}

/* Responsive - Mobile */
@media (max-width: 768px) {
    .hansen-info-cards-grid.hansen-grid-2,
    .hansen-info-cards-grid.hansen-grid-3,
    .hansen-info-cards-grid.hansen-grid-4 {
        grid-template-columns: 1fr !important;
    }
    
    .hansen-info-card .hansen-info-card-body,
    .hansen-info-card-body {
        padding: 1rem !important;
    }
    
    .hansen-info-card .hansen-info-card-title,
    .hansen-info-card-title,
    h3.hansen-info-card-title {
        font-size: 1rem !important;
    }
    
    .hansen-info-card-title-lg,
    h3.hansen-info-card-title-lg {
        font-size: 1.25rem !important;
    }
    
    .hansen-info-card .hansen-info-card-description,
    .hansen-info-card-description {
        font-size: 0.8125rem !important;
    }
    
    .hansen-info-card .hansen-info-card-swatch,
    .hansen-info-card-swatch {
        width: 28px !important;
        height: 28px !important;
    }
}

/* WPBakery Editor Compatibility */
body.wp-admin .hansen-info-card,
.wpb-page-composer-wrap .hansen-info-card {
    border: 1px dashed #ccc !important;
    margin: 5px !important;
    min-height: 100px !important;
}


/* ========================================
   PRODUCT OVERVIEW STYLES
   Alternating image/content layout for product categories
   ======================================== */

/* Container */
.hansen-product-overview {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Gap Options */
.hansen-product-overview-gap-none {
    gap: 0 !important;
}

.hansen-product-overview-gap-small {
    gap: 2rem !important;
}

.hansen-product-overview-gap-default {
    gap: 4rem !important;
}

.hansen-product-overview-gap-large {
    gap: 5rem !important;
}

/* Individual Item - Grid layout */
.hansen-product-overview .hansen-product-overview-item,
.hansen-product-overview-item {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 3rem !important;
    align-items: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Reversed layout - image on right */
.hansen-product-overview-item.hansen-product-overview-item-reversed {
    direction: rtl !important;
}

.hansen-product-overview-item.hansen-product-overview-item-reversed > * {
    direction: ltr !important;
}

/* Image Container */
.hansen-product-overview-item .hansen-product-overview-image,
.hansen-product-overview-image {
    position: relative !important;
    border-radius: 1rem !important;
    overflow: hidden !important;
}

.hansen-product-overview-item .hansen-product-overview-image img,
.hansen-product-overview-image > img {
    width: 100% !important;
    aspect-ratio: 4/3 !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
    transition: transform 0.5s ease !important;
}

/* Image hover effect */
.hansen-product-overview-item:hover .hansen-product-overview-image img {
    transform: scale(1.03) !important;
}

/* Content Container */
.hansen-product-overview-item .hansen-product-overview-content,
.hansen-product-overview-content {
    display: flex !important;
    flex-direction: column !important;
}

/* Label */
.hansen-product-overview-item .hansen-product-overview-label,
.hansen-product-overview-label {
    display: inline-block !important;
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.15em !important;
    color: #b8956b !important;
    margin-bottom: 0.75rem !important;
}

/* Title */
.hansen-product-overview-item .hansen-product-overview-title,
.hansen-product-overview-title,
h3.hansen-product-overview-title {
    font-family: 'Roboto Condensed', Arial, sans-serif !important;
    font-weight: 700 !important;
    font-size: 2rem !important;
    line-height: 1.2 !important;
    color: #1a1a1a !important;
    margin: 0 0 1rem 0 !important;
    padding: 0 !important;
}

/* Description */
.hansen-product-overview-item .hansen-product-overview-description,
.hansen-product-overview-description {
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 1rem !important;
    line-height: 1.7 !important;
    color: #4a4845 !important;
    margin: 0 0 1.5rem 0 !important;
    padding: 0 !important;
}

/* Tags Section */
.hansen-product-overview-item .hansen-product-overview-tags,
.hansen-product-overview-tags {
    margin-bottom: 1.5rem !important;
}

.hansen-product-overview-item .hansen-product-overview-tags-label,
.hansen-product-overview-tags-label,
h5.hansen-product-overview-tags-label {
    display: block !important;
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    color: #9a9590 !important;
    margin: 0 0 0.75rem 0 !important;
    padding: 0 !important;
}

.hansen-product-overview-item .hansen-product-overview-tags-list,
.hansen-product-overview-tags-list {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
}

.hansen-product-overview-item .hansen-product-overview-tag,
.hansen-product-overview-tag {
    display: inline-block !important;
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 0.875rem !important;
    font-weight: 400 !important;
    color: #1a1a1a !important;
    background-color: #f5f3ef !important;
    padding: 0.5rem 1rem !important;
    border-radius: 9999px !important;
    transition: all 0.2s ease !important;
}

.hansen-product-overview-tag:hover {
    background-color: #e8e4de !important;
}

/* Buttons Container */
.hansen-product-overview-item .hansen-product-overview-buttons,
.hansen-product-overview-buttons {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 1rem !important;
}

/* Responsive - Tablet */
@media (max-width: 1024px) {
    .hansen-product-overview-gap-large {
        gap: 4rem !important;
    }
    
    .hansen-product-overview-gap-default {
        gap: 3rem !important;
    }
    
    .hansen-product-overview .hansen-product-overview-item,
    .hansen-product-overview-item {
        gap: 2.5rem !important;
    }
    
    .hansen-product-overview-item .hansen-product-overview-title,
    .hansen-product-overview-title,
    h3.hansen-product-overview-title {
        font-size: 1.75rem !important;
    }
    
    .hansen-product-overview-item .hansen-product-overview-description,
    .hansen-product-overview-description {
        font-size: 0.9375rem !important;
    }
}

/* Responsive - Mobile */
@media (max-width: 768px) {
    .hansen-product-overview-gap-large {
        gap: 3rem !important;
    }
    
    .hansen-product-overview-gap-default {
        gap: 2.5rem !important;
    }
    
    .hansen-product-overview-gap-small {
        gap: 1.5rem !important;
    }
    
    .hansen-product-overview .hansen-product-overview-item,
    .hansen-product-overview-item {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }
    
    /* Reset reversed layout on mobile - image always first */
    .hansen-product-overview-item.hansen-product-overview-item-reversed {
        direction: ltr !important;
    }
    
    /* Image always comes first on mobile */
    .hansen-product-overview-item .hansen-product-overview-content,
    .hansen-product-overview-content {
        order: 0 !important;
    }
    
    .hansen-product-overview-item .hansen-product-overview-image,
    .hansen-product-overview-image {
        order: -1 !important;
    }
    
    .hansen-product-overview-item .hansen-product-overview-title,
    .hansen-product-overview-title,
    h3.hansen-product-overview-title {
        font-size: 1.5rem !important;
    }
    
    .hansen-product-overview-item .hansen-product-overview-description,
    .hansen-product-overview-description {
        font-size: 0.875rem !important;
        margin-bottom: 1.25rem !important;
    }
    
    .hansen-product-overview-item .hansen-product-overview-tags,
    .hansen-product-overview-tags {
        margin-bottom: 1.25rem !important;
    }
    
    .hansen-product-overview-item .hansen-product-overview-tag,
    .hansen-product-overview-tag {
        font-size: 0.8125rem !important;
        padding: 0.375rem 0.875rem !important;
    }
    
    /* Stack buttons on mobile */
    .hansen-product-overview-item .hansen-product-overview-buttons,
    .hansen-product-overview-buttons {
        flex-direction: column !important;
    }
    
    .hansen-product-overview-buttons .hansen-btn {
        width: 100% !important;
        justify-content: center !important;
    }
}

/* WPBakery Editor Compatibility */
body.wp-admin .hansen-product-overview-item,
.wpb-page-composer-wrap .hansen-product-overview-item {
    border: 1px dashed #ccc !important;
    margin: 5px !important;
    min-height: 100px !important;
    padding: 10px !important;
}


/* ========================================
   COMPARISON TABLE STYLES
   Responsive product comparison table
   ======================================== */

/* Wrapper */
.hansen-comparison-table-wrapper {
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Scroll container for mobile */
.hansen-comparison-table-scroll {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

/* Table Base */
.hansen-comparison-table {
    width: 100% !important;
    min-width: 700px !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    background-color: #ffffff !important;
    border-radius: 1rem !important;
    overflow: hidden !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
    border: 1px solid #e8e4de !important;
}

/* Table Header */
.hansen-comparison-table thead {
    background-color: #1a3c34 !important;
}

.hansen-comparison-table thead tr {
    background-color: #1a3c34 !important;
}

.hansen-comparison-table th {
    padding: 1.25rem 1.5rem !important;
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 0.9375rem !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    text-align: center !important;
    border: none !important;
    border-bottom: none !important;
}

.hansen-comparison-table th.hansen-comparison-feature-col {
    text-align: left !important;
}

/* Table Body */
.hansen-comparison-table tbody tr {
    transition: background-color 0.15s ease !important;
}

.hansen-comparison-table tbody tr:nth-child(even) {
    background-color: #faf9f7 !important;
}

.hansen-comparison-table tbody tr:hover {
    background-color: #f5f3ef !important;
}

/* Table Cells */
.hansen-comparison-table td {
    padding: 1rem 1.5rem !important;
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 0.9375rem !important;
    color: #4a4845 !important;
    text-align: center !important;
    border: none !important;
    border-bottom: 1px solid #e8e4de !important;
    vertical-align: middle !important;
}

.hansen-comparison-table tbody tr:last-child td {
    border-bottom: none !important;
}

/* Feature column (first column) */
.hansen-comparison-table td.hansen-comparison-feature {
    font-weight: 500 !important;
    color: #1a1a1a !important;
    text-align: left !important;
}

/* Value cells */
.hansen-comparison-table td.hansen-comparison-value {
    text-align: center !important;
}

/* Checkmark styling */
.hansen-comparison-table td.hansen-comparison-check {
    color: #1a3c34 !important;
    font-weight: 500 !important;
}

/* Dash styling */
.hansen-comparison-table td.hansen-comparison-dash {
    color: #9a9590 !important;
}

/* Responsive - Tablet */
@media (max-width: 1024px) {
    .hansen-comparison-table th,
    .hansen-comparison-table td {
        padding: 1rem 1.25rem !important;
        font-size: 0.875rem !important;
    }
}

/* Responsive - Mobile */
@media (max-width: 768px) {
    .hansen-comparison-table {
        min-width: 600px !important;
    }
    
    .hansen-comparison-table th,
    .hansen-comparison-table td {
        padding: 0.875rem 1rem !important;
        font-size: 0.8125rem !important;
    }
    
    .hansen-comparison-table th {
        font-size: 0.75rem !important;
    }
}

/* WPBakery Editor Compatibility */
body.wp-admin .hansen-comparison-table-wrapper,
.wpb-page-composer-wrap .hansen-comparison-table-wrapper {
    border: 1px dashed #ccc !important;
    padding: 10px !important;
    min-height: 100px !important;
}

body.wp-admin .hansen-comparison-row,
.wpb-page-composer-wrap .hansen-comparison-row {
    border: 1px dashed #eee !important;
    margin: 2px !important;
    padding: 5px !important;
}


/* ========================================
   DOWNLOAD CARDS STYLES
   Grid of downloadable document cards
   ======================================== */

/* Container */
.hansen-download-cards {
    margin-bottom: 3rem !important;
}

/* Section Title */
.hansen-download-cards .hansen-download-cards-title,
h3.hansen-download-cards-title {
    font-family: 'Roboto Condensed', Arial, sans-serif !important;
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    margin: 0 0 1.5rem 0 !important;
    padding: 0 !important;
    line-height: 1.3 !important;
}

/* Grid */
.hansen-download-cards-grid {
    display: grid !important;
    gap: 1rem !important;
}

.hansen-download-cards-grid.hansen-grid-2 {
    grid-template-columns: repeat(2, 1fr) !important;
}

.hansen-download-cards-grid.hansen-grid-3 {
    grid-template-columns: repeat(3, 1fr) !important;
}

.hansen-download-cards-grid.hansen-grid-4 {
    grid-template-columns: repeat(4, 1fr) !important;
}

/* Gap variations */
.hansen-download-cards-grid.hansen-gap-none {
    gap: 0 !important;
}

.hansen-download-cards-grid.hansen-gap-small {
    gap: 0.5rem !important;
}

.hansen-download-cards-grid.hansen-gap-default {
    gap: 1rem !important;
}

.hansen-download-cards-grid.hansen-gap-large {
    gap: 1.5rem !important;
}

/* Individual Card */
.hansen-download-card,
a.hansen-download-card {
    display: block !important;
    text-decoration: none !important;
    background: #ffffff !important;
    border: 1px solid #e8e4de !important;
    border-radius: 8px !important;
    transition: all 300ms ease !important;
    overflow: hidden !important;
}

.hansen-download-card:hover,
a.hansen-download-card:hover {
    text-decoration: none !important;
    border-color: #1a3c34 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
    transform: translateY(-2px) !important;
}

/* Card Inner */
.hansen-download-card .hansen-download-card-inner,
.hansen-download-card-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 1.5rem !important;
    min-height: 140px !important;
}

/* Card Icon */
.hansen-download-card .hansen-download-card-icon,
.hansen-download-card-icon {
    margin-bottom: 0.75rem !important;
    color: #1a3c34 !important;
    line-height: 1 !important;
}

.hansen-download-card-icon svg {
    width: 36px !important;
    height: 36px !important;
    stroke: #1a3c34 !important;
    transition: stroke 300ms ease !important;
}

.hansen-download-card:hover .hansen-download-card-icon svg {
    stroke: #b8956b !important;
}

/* Card Image Mode (e.g., schematic diagrams) */
.hansen-download-card--image-mode .hansen-download-card-icon {
    margin-bottom: 0.75rem !important;
    width: 100% !important;
    max-width: 180px !important;
}

.hansen-download-card--image-mode .hansen-download-card-icon img,
.hansen-download-card-icon img.hansen-download-card-img {
    width: 100% !important;
    height: auto !important;
    max-height: 140px !important;
    object-fit: contain !important;
    border-radius: 4px !important;
    transition: opacity 300ms ease !important;
}

.hansen-download-card--image-mode:hover .hansen-download-card-icon img {
    opacity: 0.85 !important;
}

/* Card Title */
.hansen-download-card .hansen-download-card-title,
h5.hansen-download-card-title,
.hansen-download-card-title {
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: #1a1a1a !important;
    margin: 0 0 0.25rem 0 !important;
    padding: 0 !important;
    line-height: 1.3 !important;
}

.hansen-download-card:hover .hansen-download-card-title {
    color: #1a3c34 !important;
}

/* Card Meta (file type/size) */
.hansen-download-card .hansen-download-card-meta,
.hansen-download-card-meta {
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 0.75rem !important;
    font-weight: 400 !important;
    color: #9a9590 !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.4 !important;
}

/* Responsive - Tablet */
@media (max-width: 1024px) {
    .hansen-download-cards-grid.hansen-grid-4 {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* Responsive - Mobile */
@media (max-width: 768px) {
    .hansen-download-cards-grid.hansen-grid-4,
    .hansen-download-cards-grid.hansen-grid-3 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .hansen-download-card .hansen-download-card-inner,
    .hansen-download-card-inner {
        padding: 1.25rem 1rem !important;
        min-height: 120px !important;
    }
    
    .hansen-download-card-icon svg {
        width: 32px !important;
        height: 32px !important;
    }
    
    .hansen-download-card .hansen-download-card-title,
    h5.hansen-download-card-title {
        font-size: 0.8125rem !important;
    }
}

@media (max-width: 480px) {
    .hansen-download-cards-grid.hansen-grid-4,
    .hansen-download-cards-grid.hansen-grid-3,
    .hansen-download-cards-grid.hansen-grid-2 {
        grid-template-columns: 1fr !important;
    }
}

/* WPBakery Editor Compatibility */
body.wp-admin .hansen-download-cards,
.wpb-page-composer-wrap .hansen-download-cards {
    border: 1px dashed #ccc !important;
    padding: 10px !important;
    min-height: 100px !important;
}

body.wp-admin .hansen-download-card,
.wpb-page-composer-wrap .hansen-download-card {
    border: 1px dashed #eee !important;
    margin: 2px !important;
}


/* ========================================
   FLUENT FORM SHORTCODE STYLES
   Wrapper styles for Fluent Forms integration
   ======================================== */

.hansen-fluent-form {
    width: 100% !important;
}

.hansen-fluent-form .hansen-fluent-form-title,
h3.hansen-fluent-form-title {
    font-family: 'Roboto Condensed', Arial, sans-serif !important;
    font-weight: 700 !important;
    font-size: 1.5rem !important;
    color: #1a3c34 !important;
    margin: 0 0 1.5rem 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
}

.hansen-fluent-form-error {
    color: #c53030 !important;
    background: #fff5f5 !important;
    border: 1px solid #feb2b2 !important;
    padding: 1rem !important;
    border-radius: 4px !important;
    font-size: 0.875rem !important;
}

/* WPBakery Editor Compatibility */
body.wp-admin .hansen-fluent-form,
.wpb-page-composer-wrap .hansen-fluent-form {
    border: 1px dashed #ccc !important;
    padding: 10px !important;
    min-height: 60px !important;
    background: #f9f9f9 !important;
}

body.wp-admin .hansen-fluent-form::before,
.wpb-page-composer-wrap .hansen-fluent-form::before {
    content: "Fluent Form" !important;
    display: block !important;
    font-size: 11px !important;
    color: #999 !important;
    margin-bottom: 5px !important;
}