/**
 * Hansen Timber Product Page Styles
 * Custom styles for WooCommerce single product page
 * Aligned with draft website design (products/spc/nordic.html)
 * @version 1.1
 */

/* ========================================
   CSS CUSTOM PROPERTIES
   ======================================== */

:root {
    /* Colors - ensure we have charcoal defined */
    --hansen-color-charcoal: #1a1a1a;
    --hansen-color-primary: #1a3c34;
    --hansen-color-primary-light: #2a5c4a;
    --hansen-color-primary-dark: #0f251f;
    --hansen-color-accent: #b8956b;
    --hansen-color-text: #1a1a1a;
    --hansen-color-text-secondary: #4a4845;
    --hansen-color-text-muted: #9a9590;
    --hansen-color-border: #e8e4de;
    --hansen-color-off-white: #faf9f7;
    --hansen-color-white: #ffffff;
    
    /* Typography */
    --hansen-font-family-heading: 'Roboto Condensed', Arial, sans-serif;
    --hansen-font-family-body: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    
    /* Spacing */
    --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;
    
    /* Border Radius */
    --hansen-radius-sm: 0.25rem;
    --hansen-radius-md: 0.5rem;
    --hansen-radius-full: 9999px;
    
    /* Transitions */
    --hansen-transition-fast: 150ms ease;
    --hansen-transition-normal: 300ms ease;
}

/* ========================================
   HANSEN PRODUCT INFO WRAPPER
   ======================================== */

.hansen-product-info {
    /* Uses parent styles but adds Hansen-specific overrides */
}

/* Ensure proper stacking on product pages */
.single-product .product[data-hansen-layout="true"] .summary.hansen-product-info {
    display: flex !important;
    flex-direction: column !important;
}


/* ========================================
   STICKY GALLERY - JavaScript Powered
   ======================================== */

/* 
 * Product gallery sticky behavior is handled via JavaScript (see product-functions.php)
 * to bypass CSS transform limitations in the parent theme's .ocm-effect-wrap element.
 * 
 * The JS creates a wrapper element and uses fixed/relative positioning based on scroll.
 */

/* Use flexbox layout for the product container */
.single-product .product[data-hansen-layout="true"] {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    gap: 3rem !important;
}

/* Gallery wrapper created by JS - takes 50% width */
.single-product .product[data-hansen-layout="true"] .hansen-gallery-sticky-wrapper {
    flex: 0 0 calc(50% - 1.5rem) !important;
    width: 100%;
    max-width: 100%;
    float: none !important;
    margin-bottom: 0 !important;
    align-self: flex-start !important;
    position: relative !important;
}

/* Gallery/images container - takes 50% width */
.single-product .product[data-hansen-layout="true"] > .images,
.single-product .product[data-hansen-layout="true"] > div.images {
    flex: 0 0 calc(50% - 1.5rem) !important;
    width: calc(50% - 1.5rem) !important;
    max-width: calc(50% - 1.5rem) !important;
    float: none !important;
    margin-bottom: 0 !important;
}

/* The actual gallery element inside wrapper - NO !important on width to allow JS to control it when sticky */
.single-product .product[data-hansen-layout="true"] .woocommerce-product-gallery {
    width: 100%;
    max-width: 100%;
}

/* When gallery is in sticky/fixed mode, JS sets the width explicitly via inline style */
.single-product .product[data-hansen-layout="true"] .woocommerce-product-gallery.is-sticky {
    /* Width is set by JS inline style - don't override */
}

/* Gallery image container - match draft aspect ratio */
.single-product .product[data-hansen-layout="true"] .woocommerce-product-gallery__wrapper,
.single-product .product[data-hansen-layout="true"] .woocommerce-product-gallery__image,
.single-product .product[data-hansen-layout="true"] .product-slider {
    overflow: visible !important;
}

.single-product .product[data-hansen-layout="true"] .woocommerce-product-gallery__image img {
    aspect-ratio: 4/3 !important;
    object-fit: cover !important;
    width: 100% !important;
    height: auto !important;
    max-height: 500px !important;
}

/* Cap the Flickity viewport so thumbnails stay in view */
.single-product .product[data-hansen-layout="true"] .flickity-viewport {
    max-height: 500px !important;
}

.single-product .product[data-hansen-layout="true"] .flickity-viewport img {
    max-height: 500px !important;
    object-fit: cover !important;
	object-position: top left;
}

/* Summary takes the other 50% */
.single-product .product[data-hansen-layout="true"] .summary.hansen-product-info {
    flex: 0 0 calc(50% - 1.5rem) !important;
    width: 100%;
    max-width: 100%;
    float: none !important;
}

/* Content after the product summary (tabs, related products) spans full width */
.single-product .product[data-hansen-layout="true"] .woocommerce-tabs,
.single-product .product[data-hansen-layout="true"] .related.products,
.single-product .product[data-hansen-layout="true"] .upsells.products,
.single-product .product[data-hansen-layout="true"] section.related,
.single-product .product[data-hansen-layout="true"] section.upsells,
.single-product .product[data-hansen-layout="true"] > .clear {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    display:none !important;
}

/* On tablet, adjust spacing and top position */
@media (max-width: 1024px) {
    .single-product .product[data-hansen-layout="true"] {
        gap: 2rem !important;
    }
    
    .single-product .product[data-hansen-layout="true"] .images,
    .single-product .product[data-hansen-layout="true"] div.images,
    .single-product .product[data-hansen-layout="true"] .woocommerce-product-gallery {
        flex: 0 0 calc(50% - 1rem) !important;
        width: calc(50% - 1rem) !important;
        max-width: calc(50% - 1rem) !important;
        top: 90px !important;
    }
    
    .single-product .product[data-hansen-layout="true"] .summary.hansen-product-info {
        flex: 0 0 calc(50% - 1rem) !important;
        width: 100%;
    }
    
    .single-product .product[data-hansen-layout="true"] .flickity-viewport,
    .single-product .product[data-hansen-layout="true"] .flickity-viewport img,
    .single-product .product[data-hansen-layout="true"] .woocommerce-product-gallery__image img {
        max-height: 420px !important;
    }
}

/* On mobile, stack vertically and disable sticky */
@media (max-width: 768px) {
    .single-product .product[data-hansen-layout="true"] {
        display: block !important;
    }
    
    .single-product .product[data-hansen-layout="true"] .images,
    .single-product .product[data-hansen-layout="true"] div.images,
    .single-product .product[data-hansen-layout="true"] .woocommerce-product-gallery {
        position: relative !important;
        top: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 2rem !important;
    }
    
    .single-product .product[data-hansen-layout="true"] .summary.hansen-product-info {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .single-product .product[data-hansen-layout="true"] .flickity-viewport,
    .single-product .product[data-hansen-layout="true"] .flickity-viewport img,
    .single-product .product[data-hansen-layout="true"] .woocommerce-product-gallery__image img {
        max-height: 350px !important;
    }
}


/* ========================================
   BREADCRUMB
   ======================================== */

.hansen-product-breadcrumb {
    display: flex !important;
    align-items: center !important;
    gap: var(--hansen-space-2, 0.5rem) !important;
    font-size: 0.8125rem !important;
    color: var(--hansen-color-text-muted, #9a9590) !important;
    margin-bottom: var(--hansen-space-4, 1rem) !important;
    flex-wrap: wrap !important;
}

.hansen-product-breadcrumb a {
    color: var(--hansen-color-text-muted, #9a9590) !important;
    text-decoration: none !important;
    transition: color var(--hansen-transition-fast, 150ms ease) !important;
}

.hansen-product-breadcrumb a:hover {
    color: var(--hansen-color-logo-green, #99CC33) !important;
}

.hansen-breadcrumb-sep {
    opacity: 0.5 !important;
}

.hansen-breadcrumb-current {
    color: var(--hansen-color-text-secondary, #4a4845) !important;
}


/* ========================================
   PRODUCT TITLE & SUBTITLE
   ======================================== */

/* Product Title - Match draft: light weight, larger size */
.hansen-product-info .product_title {
    font-family: var(--hansen-font-family-heading, 'Roboto Condensed', sans-serif) !important;
    font-weight: 300 !important; /* Light weight like draft */
    font-size: 2.25rem !important; /* text-4xl equivalent */
    line-height: 1.2 !important;
    color: var(--hansen-color-text, #1a1a1a) !important;
    margin-bottom: var(--hansen-space-2, 0.5rem) !important;
}

/* Product Subtitle - Match draft: heading font, larger size, light weight */
.hansen-product-subtitle {
    font-family: var(--hansen-font-family-heading, 'Roboto Condensed', sans-serif) !important;
    font-size: 1.5rem !important; /* text-2xl equivalent */
    font-weight: 300 !important; /* Light weight like draft */
    color: var(--hansen-color-text-secondary, #4a4845) !important;
    margin-bottom: var(--hansen-space-6, 1.5rem) !important;
    padding: 0px !important;
}


/* ========================================
   PRICE & PRICE NOTE
   ======================================== */

/* Match draft: text-xl size, align with actions spacing */
.hansen-product-info .price {
    display: flex !important;
    align-items: center !important;
    gap: var(--hansen-space-2, 0.5rem) !important;
    font-size: 1.25rem !important;
    font-weight: 400 !important;
    color: var(--hansen-color-text, #1a1a1a) !important;
    margin: 0px !important;
    padding-bottom: 15px !important;
}

/* "Contact for Pricing" styling - match draft */
.hansen-product-info .price .hansen-contact-price,
.hansen-contact-price {
    font-size: 1.25rem !important;
    font-weight: 400 !important;
    color: var(--hansen-color-text, #1a1a1a) !important;
}

.hansen-product-info .price del {
    color: var(--hansen-color-text-muted, #9a9590) !important;
    font-size: 1rem !important;
}

.hansen-product-info .price ins {
    text-decoration: none !important;
}

.hansen-product-price-note {
    font-size: 0.875rem !important;
    color: var(--hansen-color-text-muted, #9a9590) !important;
    margin-bottom: var(--hansen-space-6, 1.5rem) !important;
}


/* ========================================
   PRODUCT ACTIONS (Sample Box + Favorite)
   ======================================== */

/* Match draft: larger bottom margin (space-8) */
.hansen-product-actions {
    display: flex !important;
    gap: var(--hansen-space-3, 0.75rem) !important;
    margin-bottom: var(--hansen-space-4, 2rem) !important;
}

/* Sample Button - Match draft: charcoal background, uppercase */
.hansen-btn-sample {
    flex: 1 !important;
    padding: 1rem 1.5rem !important;
    background-color: var(--hansen-color-charcoal, #1a1a1a) !important;
    color: var(--hansen-color-white, #ffffff) !important;
    border: none !important;
    border-radius: 0 !important;
    font-family: var(--hansen-font-family-body, 'DM Sans', sans-serif) !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    transition: all var(--hansen-transition-fast, 150ms ease) !important;
    text-align: center !important;
}

.hansen-btn-sample:hover {
    background-color: var(--hansen-color-primary, #1a3c34) !important;
}

.hansen-btn-sample:active {
    background-color: var(--hansen-color-primary-dark, #0f251f) !important;
}

.hansen-btn-sample.added {
    background-color: var(--hansen-color-accent, #b8956b) !important;
}

/* Favorite Button - Match draft: larger (52px), white bg */
.hansen-btn-favorite {
    width: 52px !important;
    height: 52px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: var(--hansen-color-white, #ffffff) !important;
    border: 1px solid var(--hansen-color-border, #e8e4de) !important;
    border-radius: 0 !important;
    cursor: pointer !important;
    transition: all var(--hansen-transition-fast, 150ms ease) !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
}

.hansen-btn-favorite svg {
    width: 20px !important;
    height: 20px !important;
    stroke: var(--hansen-color-text-secondary, #4a4845) !important;
    fill: none !important;
    transition: all var(--hansen-transition-normal, 300ms ease) !important;
}

.hansen-btn-favorite:hover {
    border-color: var(--hansen-color-accent, #b8956b) !important;
}

.hansen-btn-favorite:hover svg {
    stroke: var(--hansen-color-accent, #b8956b) !important;
}

.hansen-btn-favorite.active svg,
.hansen-btn-favorite.is-favorite svg {
    fill: var(--hansen-color-accent, #b8956b) !important;
    stroke: var(--hansen-color-accent, #b8956b) !important;
}


/* ========================================
   INLINE SPECIFICATIONS
   ======================================== */

/* Match draft: no borders, left aligned, larger gaps/values */
.hansen-product-specs-inline {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: var(--hansen-space-6, 1.5rem) !important;
    margin-bottom: var(--hansen-space-6, 1.5rem) !important;
    margin-top:10px;
}

.hansen-product-spec-item {
    text-align: left !important;
}

.hansen-product-spec-label {
    font-size: 0.75rem !important;
    color: var(--hansen-color-text-muted, #9a9590) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    margin-bottom: var(--hansen-space-1, 0.25rem) !important;
    padding-bottom: 0px !important;
}

.hansen-product-spec-value {
    font-size: 1.125rem !important; /* text-lg equivalent */
    font-weight: 500 !important;
    color: var(--hansen-color-text, #1a1a1a) !important;
    padding-bottom: 0px !important;
}


/* ========================================
   IDEAL FOR
   ======================================== */

/* Match draft: italic styling */
.hansen-product-ideal-for {
    font-size: 0.875rem !important;
    font-style: italic !important;
    color: var(--hansen-color-text-secondary, #4a4845) !important;
    line-height: 1.6 !important;
    margin-bottom: var(--hansen-space-6, 1.5rem) !important;
    padding-bottom:0px !important;
}

.hansen-product-ideal-for strong {
    font-style: normal !important;
    color: var(--hansen-color-text, #1a1a1a) !important;
}


/* ========================================
   FEATURE BADGES
   ======================================== */

/* Match draft: rounded corners (not pills), text-xs size */
.hansen-feature-badges {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: var(--hansen-space-2, 0.5rem) !important;
    margin-bottom: var(--hansen-space-8, 2rem) !important;
}

.hansen-feature-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: var(--hansen-space-2, 0.5rem) !important;
    padding: 0.5rem 1rem !important;
    background-color: var(--hansen-color-off-white, #faf9f7) !important;
    color: var(--hansen-color-text, #1a1a1a) !important;
    font-size: 0.75rem !important; /* text-xs equivalent */
    font-weight: 400 !important;
    border-radius: var(--hansen-radius-sm, 0.25rem) !important;
    border: 1px solid var(--hansen-color-border, #e8e4de) !important;
    white-space: nowrap !important;
}


/* ========================================
   QUICK LINKS
   ======================================== */

/* Match draft: vertical stack, underline style */
.hansen-quick-links {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--hansen-space-3, 0.75rem) !important;
    margin-bottom: var(--hansen-space-8, 2rem) !important;
}

.hansen-quick-link {
    color: var(--hansen-color-text, #1a1a1a) !important;
    text-decoration: underline !important;
    text-underline-offset: 4px !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    transition: color var(--hansen-transition-fast, 150ms ease) !important;
}

.hansen-quick-link:hover {
    color: var(--hansen-color-primary, #1a3c34) !important;
}


/* ========================================
   ACCORDION
   ======================================== */

.hansen-accordion {
    margin-bottom: var(--hansen-space-6, 1.5rem) !important;
}

.hansen-accordion-item {
    border-bottom: 1px solid var(--hansen-color-border, #e8e4de) !important;
}

.hansen-accordion-item:first-child {
    border-top: 1px solid var(--hansen-color-border, #e8e4de) !important;
}

/* Match draft: larger padding (space-5) */
.hansen-accordion-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    padding: var(--hansen-space-5, 1.25rem) 0 !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    font-family: var(--hansen-font-family-body, 'DM Sans', sans-serif) !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    color: var(--hansen-color-text, #1a1a1a) !important;
    text-align: left !important;
    transition: color var(--hansen-transition-fast, 150ms ease) !important;
}

.hansen-accordion-header:hover {
    color: var(--hansen-color-primary, #1a3c34) !important;
}

.hansen-accordion-count {
    font-weight: 400 !important;
    color: var(--hansen-color-text-muted, #9a9590) !important;
    margin-left: var(--hansen-space-2, 0.5rem) !important;
}

.hansen-accordion-icon {
    width: 20px !important;
    height: 20px !important;
    stroke: currentColor !important;
    transition: transform var(--hansen-transition-normal, 300ms ease) !important;
    flex-shrink: 0 !important;
}

.hansen-accordion-item.active .hansen-accordion-icon {
    transform: rotate(180deg) !important;
}

.hansen-accordion-content {
    max-height: 0 !important;
    overflow: hidden !important;
    transition: max-height var(--hansen-transition-normal, 300ms ease) !important;
}

.hansen-accordion-item.active .hansen-accordion-content {
    max-height: 2000px !important;
}

/* Match draft: larger padding */
.hansen-accordion-inner {
    padding-bottom: var(--hansen-space-6, 1.5rem) !important;
}


/* ========================================
   COLOUR SWATCHES (Always Visible Section)
   ======================================== */

.hansen-colours-section {
    margin-top: var(--hansen-space-5, 1.25rem) !important;
    margin-bottom: var(--hansen-space-5, 1.25rem) !important;
    padding-bottom: var(--hansen-space-5, 1.25rem) !important;
    border-bottom: 1px solid var(--hansen-color-border, #e8e4e0) !important;
}

.hansen-colours-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: baseline !important;
    margin-bottom: var(--hansen-space-3, 0.75rem) !important;
}

.hansen-colours-title {
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: var(--hansen-color-text, #2c2825) !important;
    margin: 0 !important;
    padding: 0 !important;
}

.hansen-colours-count {
    font-weight: 400 !important;
    color: var(--hansen-color-text-muted, #9a9590) !important;
    font-size: 0.875rem !important;
    margin-left: 0.25rem !important;
}

.hansen-colours-section .hansen-swatch-label {
    margin: 0 !important;
    padding: 0 !important;
}

.hansen-swatch-label {
    font-size: 0.875rem !important;
    color: var(--hansen-color-text-muted, #9a9590) !important;
    margin-bottom: var(--hansen-space-3, 0.75rem) !important;
    padding-bottom:0px !important;
}

.hansen-color-swatches {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: var(--hansen-space-3, 0.75rem) !important;
    padding-left:4px;
}

/* Match draft: larger swatches (48px) */
.hansen-color-swatch {
    width: 48px !important;
    height: 48px !important;
    border-radius: var(--hansen-radius-full, 9999px) !important;
    border: 2px solid transparent !important;
    cursor: pointer !important;
    transition: all var(--hansen-transition-fast, 150ms ease) !important;
    overflow: hidden !important;
    padding: 0 !important;
}

.hansen-color-swatch:hover {
    transform: scale(1.1) !important;
}

.hansen-color-swatch.active {
    border-color: var(--hansen-color-primary, #1a3c34) !important;
    box-shadow: 
        0 0 0 2px var(--hansen-color-white, #ffffff),
        0 0 0 4px var(--hansen-color-primary, #1a3c34) !important;
}


/* ========================================
   SPECS TABLE
   ======================================== */

.hansen-spec-table {
    width: 100% !important;
    border-collapse: collapse !important;
    background-color: transparent !important;
    border: none !important;
    margin-bottom: 0px !important;
}

.hansen-spec-table tr {
    border-bottom: 1px solid var(--hansen-color-border, #e8e4de) !important;
    background-color: transparent !important;
}

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

.hansen-spec-table td {
    padding: var(--hansen-space-3, 0.75rem) 0 !important;
    font-size: 0.875rem !important;
    vertical-align: top !important;
    background-color: transparent !important;
    border: none !important;
}

.hansen-spec-table .hansen-spec-label {
    font-weight: 500 !important;
    color: var(--hansen-color-text, #1a1a1a) !important;
    width: 40% !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

.hansen-spec-table .hansen-spec-value {
    color: var(--hansen-color-text-secondary, #4a4845) !important;
    font-weight: 400 !important;
    font-size: 0.875rem !important;
}


/* ========================================
   DOWNLOADS
   ======================================== */

.hansen-downloads {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: var(--hansen-space-4, 1rem) !important;
}

.hansen-download-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: var(--hansen-space-2, 0.5rem) !important;
    padding: 0.625rem 1rem !important;
    background-color: transparent !important;
    color: var(--hansen-color-text-secondary, #4a4845) !important;
    border: 1px solid var(--hansen-color-border, #e8e4de) !important;
    border-radius: var(--hansen-radius-sm, 0.25rem) !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: all var(--hansen-transition-normal, 300ms ease) !important;
}

.hansen-download-btn svg {
    width: 16px !important;
    height: 16px !important;
    stroke: currentColor !important;
}

.hansen-download-btn:hover {
    background-color: var(--hansen-color-off-white, #faf9f7) !important;
    border-color: var(--hansen-color-primary, #1a3c34) !important;
    color: var(--hansen-color-primary, #1a3c34) !important;
}


/* ========================================
   SUSTAINABILITY
   ======================================== */

.hansen-sustainability-text {
    font-size: 0.875rem !important;
    color: var(--hansen-color-text-secondary, #4a4845) !important;
    line-height: 1.7 !important;
    margin-bottom: var(--hansen-space-4, 1rem) !important;
    padding-bottom:0px !important;
}

.hansen-sustainability-badges {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: var(--hansen-space-3, 0.75rem) !important;
}


/* ========================================
   INSTALLATION
   ======================================== */

.hansen-installation-text {
    font-size: 0.875rem !important;
    color: var(--hansen-color-text-secondary, #4a4845) !important;
    line-height: 1.625 !important;
    margin-bottom: var(--hansen-space-4, 1rem) !important;
    padding-bottom:0px !important;
}

.hansen-installation-badges {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: var(--hansen-space-3, 0.75rem) !important;
}


/* ========================================
   SIMILAR PRODUCTS
   ======================================== */

.hansen-similar-products {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: var(--hansen-space-4, 1rem) !important;
}

.hansen-similar-product {
    text-decoration: none !important;
    color: inherit !important;
    transition: opacity var(--hansen-transition-normal, 300ms ease) !important;
}

.hansen-similar-product:hover {
    opacity: 0.8 !important;
}

.hansen-similar-product-image {
    aspect-ratio: 1 !important;
    background-color: var(--hansen-color-off-white, #faf9f7) !important;
    margin-bottom: var(--hansen-space-2, 0.5rem) !important;
    overflow: hidden !important;
    border-radius: var(--hansen-radius-sm, 0.25rem) !important;
}

.hansen-similar-product-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.hansen-similar-product-title {
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: var(--hansen-color-text, #1a1a1a) !important;
    margin-bottom: var(--hansen-space-1, 0.25rem) !important;
}

.hansen-similar-product-price {
    font-size: 0.8125rem !important;
    color: var(--hansen-color-text-muted, #9a9590) !important;
}


/* ========================================
   FEATURE HIGHLIGHT
   ======================================== */

/* Match draft: no border, larger padding, simpler icon styling */
.hansen-feature-highlight {
    display: flex !important;
    align-items: flex-start !important;
    gap: var(--hansen-space-4, 1rem) !important;
    padding: 0px;
    background-color: var(--hansen-color-off-white, #faf9f7) !important;
    border-radius: var(--hansen-radius-md, 0.5rem) !important;
    margin-top: 10px;
}

.hansen-feature-highlight-icon {
    flex-shrink: 0 !important;
    width: 48px !important;
    height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--hansen-color-primary, #1a3c34) !important;
}

.hansen-feature-highlight-icon svg {
    width: 32px !important;
    height: 32px !important;
    stroke: currentColor !important;
}

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

.hansen-feature-highlight-title {
    font-size: 1.125rem !important;
    font-weight: 500 !important;
    color: var(--hansen-color-text, #1a1a1a) !important;
    margin-bottom: var(--hansen-space-2, 0.5rem) !important;
}

.hansen-feature-highlight-text {
    font-size: 0.875rem !important;
    color: var(--hansen-color-text-secondary, #4a4845) !important;
    line-height: 1.625 !important;
    margin: 0 !important;
}


/* ========================================
   WOOCOMMERCE OVERRIDES
   ======================================== */

/* Hide default WooCommerce elements when Hansen layout is active */
.single-product .product[data-hansen-layout="true"] .woocommerce-product-rating,
.single-product .product[data-hansen-layout="true"] .cart,
.single-product .product[data-hansen-layout="true"] .product_meta {
    display: none !important;
}

/* Adjust excerpt/description styling - match draft with bottom border */
.hansen-product-info .woocommerce-product-details__short-description {
    margin-bottom: var(--hansen-space-8, 2rem) !important;
    padding-bottom: var(--hansen-space-2, 2rem) !important;
    border-bottom: 1px solid var(--hansen-color-border, #e8e4de) !important;
}

.hansen-product-info .woocommerce-product-details__short-description p {
    font-size: 1rem !important;
    color: var(--hansen-color-text-secondary, #4a4845) !important;
    line-height: 1.625 !important;
    margin-bottom: 0 !important;
}


/* ========================================
   RESPONSIVE STYLES - TABLET
   ======================================== */

@media (max-width: 1024px) {
    .hansen-product-info .product_title {
        font-size: 1.875rem !important;
    }
    
    .hansen-product-subtitle {
        font-size: 1.25rem !important;
    }
    
    .hansen-product-specs-inline {
        gap: var(--hansen-space-4, 1rem) !important;
    }
    
    .hansen-similar-products {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}


/* ========================================
   RESPONSIVE STYLES - MOBILE
   ======================================== */

@media (max-width: 768px) {
    .hansen-product-info .product_title {
        font-size: 1.5rem !important;
    }
    
    .hansen-product-subtitle {
        font-size: 1.125rem !important;
    }
    
    .hansen-product-specs-inline {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: var(--hansen-space-3, 0.75rem) !important;
    }
    
    .hansen-product-spec-label {
        font-size: 0.6875rem !important;
        
    }
    
    .hansen-product-spec-value {
        font-size: 0.9375rem !important;
    }
    
    .hansen-product-actions {
        flex-direction: row !important;
    }
    
    .hansen-btn-sample,
    .hansen-btn-enquiry {
        padding: 0.875rem 1rem !important;
        font-size: 0.75rem !important;
    }
    
    .hansen-btn-favorite {
        width: 46px !important;
        height: 46px !important;
    }
    
    .hansen-quick-links {
        gap: var(--hansen-space-2, 0.5rem) !important;
    }
    
    .hansen-quick-link {
        font-size: 0.75rem !important;
    }
    
    .hansen-accordion-header {
        padding: var(--hansen-space-4, 1rem) 0 !important;
        font-size: 0.9375rem !important;
    }
    
    .hansen-color-swatch {
        width: 40px !important;
        height: 40px !important;
    }
    
    .hansen-similar-products {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: var(--hansen-space-3, 0.75rem) !important;
    }
    
    .hansen-similar-product-title {
        font-size: 0.8125rem !important;
    }
    
    .hansen-similar-product-price {
        font-size: 0.75rem !important;
    }
    
    .hansen-feature-highlight {
        padding: var(--hansen-space-4, 1rem) !important;
    }
    
    .hansen-feature-highlight-icon {
        width: 40px !important;
        height: 40px !important;
    }
    
    .hansen-feature-highlight-icon svg {
        width: 24px !important;
        height: 24px !important;
    }
    
    .hansen-feature-highlight-title {
        font-size: 1rem !important;
    }
    
    .hansen-feature-highlight-text {
        font-size: 0.8125rem !important;
    }
    
    .hansen-downloads {
        flex-direction: column !important;
    }
    
    .hansen-download-btn {
        justify-content: center !important;
    }
}


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

/* Accordion animation */
.hansen-accordion-item .hansen-accordion-content {
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Swatch selection animation */
.hansen-color-swatch {
    transition: 
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease !important;
}

/* Button hover animations */
.hansen-btn-sample,
.hansen-btn-favorite,
.hansen-download-btn,
.hansen-quick-link {
    transition: all 0.2s ease !important;
}


/* ========================================
   CATALOGUE MODE - ENQUIRY BUTTON
   ======================================== */

.hansen-catalogue-enquiry {
    margin-bottom: var(--hansen-space-6, 1.5rem) !important;
}

/* Match sample button styling exactly */
.hansen-btn-enquiry {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    padding: 1rem 1.5rem !important;
    background-color: var(--hansen-color-primary, #1a3c34) !important;
    color: var(--hansen-color-white, #ffffff) !important;
    border: none !important;
    border-radius: 0 !important;
    font-family: var(--hansen-font-family-body, 'DM Sans', sans-serif) !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    text-decoration: none !important;
    transition: all var(--hansen-transition-fast, 150ms ease) !important;
    text-align: center !important;
    height:52px;
}

.hansen-btn-enquiry:hover {
    background-color: var(--hansen-color-primary-light, #2a5c4a) !important;
    color: var(--hansen-color-white, #ffffff) !important;
}

.hansen-btn-enquiry:active {
    background-color: var(--hansen-color-primary-dark, #0f251f) !important;
}

/* Alternative outline style - use class hansen-btn-enquiry--outline */
.hansen-btn-enquiry--outline {
    background-color: transparent !important;
    color: var(--hansen-color-primary, #1a3c34) !important;
    border: 2px solid var(--hansen-color-primary, #1a3c34) !important;
}

.hansen-btn-enquiry--outline:hover,
.woocommerce-page a.hansen-btn-enquiry--outline.button:hover {
    background-color: var(--hansen-color-primary, #1a3c34) !important;
    color: var(--hansen-color-white, #ffffff) !important;
}


/* ========================================
   TOAST NOTIFICATIONS
   ======================================== */

.hansen-toast {
    position: fixed !important;
    bottom: 20px !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(100px) !important;
    background-color: var(--hansen-color-charcoal, #1a1a1a) !important;
    color: var(--hansen-color-white, #ffffff) !important;
    padding: 0.875rem 1.5rem !important;
    border-radius: var(--hansen-radius-md, 0.5rem) !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    z-index: 10000 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: all 0.3s ease !important;
    box-shadow: var(--hansen-shadow-lg) !important;
}

.hansen-toast.show {
    transform: translateX(-50%) translateY(0) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.hansen-toast.success {
    background-color: var(--hansen-color-primary, #1a3c34) !important;
}

.hansen-toast.error {
    background-color: #c0392b !important;
}


/* ========================================
   SWATCH GALLERY SLIDES
   Slides built by JS when switching colour swatches
   ======================================== */

.hansen-gallery-img-wrap {
    display: block !important;
    cursor: default !important;
}

.hansen-swatch-slide {
    cursor: default !important;
}


/* ========================================
   IMAGE-BASED COLOUR SWATCHES
   Swatches that use an image instead of solid/gradient
   ======================================== */

.hansen-color-swatch.hansen-swatch-has-image {
    border: 2px solid var(--hansen-color-warm-gray, #e8e4de) !important;
    background-size: cover !important;
    background-position: center !important;
}

.hansen-color-swatch.hansen-swatch-has-image.active {
    border-color: var(--hansen-color-primary, #1a3c34) !important;
}


/* ========================================
   SCHEMATIC DIAGRAMS
   Profile/cross-section diagram images beneath inline specs
   ======================================== */

.hansen-schematic-diagrams {
    margin: 1.25rem 0 !important;
    padding: 0 !important;
}

.hansen-schematic-diagrams-title {
    font-family: 'Roboto Condensed', Arial, sans-serif !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    color: var(--hansen-color-charcoal, #1a1a1a) !important;
    margin: 0 0 0.75rem 0 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.hansen-schematic-diagrams-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 1rem !important;
}

.hansen-schematic-diagram {
    flex: 0 0 auto !important;
    max-width: 200px !important;
    margin: 0 !important;
    text-align: center !important;
}

.hansen-schematic-link {
    display: block !important;
    border: 1px solid var(--hansen-color-warm-gray, #e8e4de) !important;
    border-radius: var(--hansen-radius-sm, 0.375rem) !important;
    overflow: hidden !important;
    transition: border-color 300ms ease, box-shadow 300ms ease !important;
}

.hansen-schematic-link:hover {
    border-color: var(--hansen-color-primary, #1a3c34) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

.hansen-schematic-diagram img {
    width: 100% !important;
    height: auto !important;
    max-height: 160px !important;
    object-fit: contain !important;
    display: block !important;
    padding: 0.5rem !important;
    background: #fafafa !important;
}

figcaption.hansen-schematic-label {
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 0.75rem !important;
    color: var(--hansen-color-medium-gray, #6b6560) !important;
    margin-top: 0.375rem !important;
    line-height: 1.3 !important;
}

@media (max-width: 480px) {
    .hansen-schematic-diagram {
        max-width: 140px !important;
    }
    
    .hansen-schematic-diagram img {
        max-height: 120px !important;
    }
}