/* Portfolio Split Functionality - Fixed Version */

/* Ensure all sections maintain proper fullPage.js heights */
.section {
    min-height: 100vh !important;
    position: relative !important;
}

/* Portfolio Split Detail Panels - REPLACE STORY LIST */
.pspl-detail-panel {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(28, 28, 28, 0.98) !important;
    backdrop-filter: blur(15px) !important;
    z-index: 1000 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: all 0.4s ease !important;
    overflow-y: auto !important;
    padding: 40px !important;
    box-sizing: border-box !important;
    color: #ffffff !important;
    display: none !important;
}

.pspl-detail-panel.active {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

/* Story List Container */
.pspl-story-list {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: 100vh !important; /* Full viewport height */
    padding: clamp(20px, 3vh, 40px) clamp(15px, 2vw, 30px) !important; /* Responsive padding */
    box-sizing: border-box !important;
    overflow: hidden !important; /* Prevent individual scrolling */
    justify-content: center !important; /* Center the entire content group */
    align-items: center !important; /* Center horizontally */
    gap: clamp(60px, 10vh, 120px) !important; /* Much larger gap between title and stories */
}

.pspl-story-list.hidden {
    display: none !important;
}

/* Allow theme CSS to style the section title, just ensure proper spacing and width */
.pspl-story-list .section-title {
    margin-bottom: 0 !important; /* Remove margin as gap handles spacing */
    margin-top: 30px !important; /* Move title lower */
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    overflow: visible !important;
    text-align: center !important;
    display: block !important;
    flex-shrink: 0 !important; /* Prevent title from shrinking */
}

/* Ensure section title inner has full width and responsive behavior */
.pspl-story-list .section-title-inner {
    width: 100% !important;
    max-width: none !important;
    white-space: normal !important; /* Allow wrapping to prevent truncation */
    overflow: visible !important;
    text-overflow: clip !important;
    /* Make title much larger and thicker to match other sections - responsive but contained */
    font-size: clamp(2rem, min(6vw, 6vh), 4rem) !important; /* More conservative sizing to stay in bounds */
    font-weight: 900 !important; /* Much thicker/bolder weight */
    line-height: 1.1 !important; /* Tighter line height for better appearance */
    min-width: fit-content !important; /* Ensure content fits */
    text-align: center !important; /* Maintain center alignment */
    display: block !important; /* Block display for better text wrapping */
    color: #ffffff !important; /* Set to white color */
    word-wrap: break-word !important; /* Allow word breaking if needed */
    overflow-wrap: break-word !important; /* Modern word breaking */
    hyphens: none !important; /* No hyphens */
}

/* Ensure section header has full width and responsive behavior */
.pspl-story-list .section-header {
    width: 100% !important;
    max-width: none !important;
    white-space: normal !important; /* Allow wrapping on smaller screens */
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    font-size: clamp(1rem, 2vw + 0.5rem, 1.5rem) !important; /* Responsive font size */
    line-height: 1.4 !important;
    text-align: center !important; /* Maintain center alignment */
    display: block !important; /* Ensure it stays below the title */
}

/* Story Items Container - treat all story items as one flexible group */
.pspl-story-list .portfolio-split-item {
    flex-shrink: 1 !important; /* Allow story items to shrink together */
    min-height: 0 !important; /* Allow flexible sizing */
    margin-bottom: 0 !important; /* No space between items */
    padding-bottom: 0 !important; /* No padding between items */
    margin-top: 0 !important; /* No top margin */
    padding-top: 0 !important; /* No top padding */
    border-bottom: none !important; /* Remove any borders that create visual separation */
}

/* Ensure consistent spacing for story items */
.pspl-story-list .portfolio-split-item:last-child {
    margin-bottom: 0 !important; /* Remove bottom margin from last item */
}

/* Story Items Container - compress all story items vertically */
.pspl-story-items-container {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 0 !important; /* No gap between items */
    line-height: 1 !important; /* Compress line height */
    margin-top: -20px !important; /* Move story items higher */
    /* This container will squeeze the story items together */
}

/* Further compress items within the container */
.pspl-story-items-container .portfolio-split-item {
    margin: 0 !important; /* Remove all margins */
    padding: 0 !important; /* Remove all padding */
    line-height: 1.1 !important; /* Tight line height */
    border: none !important; /* Remove borders */
}

/* Compress the title text within compressed items */
.pspl-story-items-container .pspl-item-title,
.pspl-story-items-container .pspl-item-hover-title {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.1 !important; /* Tight line height for titles */
}

.pspl-detail-inner {
    /* REMOVE max-width constraint to allow titles full space */
    max-width: none !important; /* Changed from 600px - LET TITLES BREATHE! */
    width: 100% !important; /* Take full available width */
    margin: 0 auto !important;
    color: #ffffff !important;
    padding-top: 20px !important;
    padding-left: 20px !important; /* Add some side padding for content */
    padding-right: 20px !important; /* Add some side padding for content */
}

.pspl-detail-header {
    margin-bottom: 30px !important;
    /* Ensure header doesn't constrain title width */
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
}

/* Force detail panel header containers to not constrain titles */
.pspl-detail-panel .pspl-detail-header,
.pspl-detail-panel .pspl-detail-inner .pspl-detail-header {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    margin-bottom: 30px !important;
}

.pspl-detail-title {
    /* RESPONSIVE font size that scales with viewport width */
    font-size: clamp(1.2rem, 4vw, 3.5rem) !important; 
    font-weight: 300 !important;
    color: #ffffff !important;
    margin: 0 0 10px 0 !important;
    line-height: 1.2 !important;
    
    /* Essential container properties - FULL WIDTH! */
    width: 100% !important;
    max-width: 100% !important; /* Take FULL available space */
    display: block !important;
    
    /* Center the title text but allow full width */
    text-align: center !important;
    
    /* CRITICAL: Prevent any truncation by CSS */
    white-space: nowrap !important; /* Start as single line */
    overflow: visible !important; /* NEVER hide text */
    text-overflow: clip !important; /* No ellipsis */
    
    /* Allow smooth font size transitions */
    transition: font-size 0.3s ease !important;
    
    /* Ensure high specificity to override any other styles */
    position: relative !important;
    z-index: 10 !important;
}

/* RESPONSIVE DETAIL PANEL TITLES - Handle both class variations */
.pspl-detail-panel .section-title-inner {
    /* RESPONSIVE font size that scales with viewport width */
    font-size: clamp(1.2rem, 4vw, 3.5rem) !important; 
    font-weight: 300 !important;
    color: #ffffff !important;
    margin: 0 0 10px 0 !important;
    line-height: 1.2 !important;
    
    /* Essential container properties - FULL WIDTH! */
    width: 100% !important;
    max-width: 100% !important; /* Take FULL available space */
    display: block !important;
    
    /* Center the title text but allow full width */
    text-align: center !important;
    
    /* CRITICAL: Prevent any truncation by CSS */
    white-space: nowrap !important; /* Start as single line */
    overflow: visible !important; /* NEVER hide text */
    text-overflow: clip !important; /* No ellipsis */
    
    /* Allow smooth font size transitions */
    transition: font-size 0.3s ease !important;
    
    /* Ensure high specificity to override any other styles */
    position: relative !important;
    z-index: 10 !important;
}

/* ULTRA HIGH SPECIFICITY - Force responsive title styling */
.pspl-detail-panel .pspl-detail-header .section-title-inner,
.pspl-detail-panel .pspl-detail-inner .section-title-inner,
.wear-moment-section .pspl-detail-panel .section-title-inner,
div.pspl-detail-panel div.section-title-inner {
    /* AGGRESSIVE responsive font size that scales dramatically with viewport width */
    font-size: clamp(0.8rem, 5vw, 3rem) !important; 
    font-weight: 300 !important;
    color: #ffffff !important;
    margin: 0 0 10px 0 !important;
    line-height: 1.2 !important;
    
    /* Essential container properties - FULL WIDTH! */
    width: 100% !important;
    max-width: 100% !important; /* Take FULL available space */
    display: block !important;
    
    /* Center the title text but allow full width */
    text-align: center !important;
    
    /* CRITICAL: Keep on one line and scale font size to fit */
    white-space: nowrap !important; /* ALWAYS stay on one line */
    overflow: visible !important; /* NEVER hide text */
    text-overflow: clip !important; /* No ellipsis */
    
    /* Remove any possible width constraints */
    min-width: 0 !important;
    box-sizing: border-box !important;
    
    /* Allow smooth font size transitions */
    transition: font-size 0.3s ease !important;
    
    /* Ensure high specificity to override any other styles */
    position: relative !important;
    z-index: 10 !important;
}

.pspl-detail-subtitle {
    font-size: 1.2rem !important;
    color: #cccccc !important;
    margin: 0 0 20px 0 !important;
    font-weight: 300 !important;
}

.pspl-detail-description {
    font-size: 1rem !important;
    color: #e0e0e0 !important;
    line-height: 1.6 !important;
    margin-bottom: 30px !important;
    max-width: 800px !important; /* Keep description readable but wider than before */
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Gallery within detail panels */
.pspl-detail-gallery {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
    gap: 20px !important;
    margin-top: 20px !important;
}

.pspl-detail-gallery img {
    width: 100% !important;
    height: 200px !important;
    object-fit: cover !important;
    border-radius: 8px !important;
    transition: transform 0.3s ease !important;
    cursor: pointer !important;
}

.pspl-detail-gallery img:hover {
    transform: scale(1.05) !important;
}

/* Close button for detail panels */
.pspl-close-btn {
    position: absolute !important;
    top: 20px !important;
    right: 20px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    font-size: 18px !important;
    z-index: 1001 !important;
}

.pspl-close-btn:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    transform: scale(1.1) !important;
}

/* Horizontal Button Layout - Fixed Implementation */
.context-buttons {
    display: flex !important;
    flex-direction: row !important;
    gap: 15px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    margin-top: 20px !important;
    width: auto !important;
    min-width: 120px !important;
}

.context-btn {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
    padding: 12px !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 48px !important;
    height: 48px !important;
    flex-shrink: 0 !important;
}

.context-btn:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    transform: translateY(-2px) !important;
}

.context-btn i {
    font-size: 24px !important;
    color: #ffffff !important;
}

/* Remove any vertical stacking containers */
.text-wrapper {
    display: block !important;
    width: 100% !important;
}

/* Ensure no ugly containers interfere */
.context-buttons-container,
.button-container {
    display: none !important;
}

.pspl-detail-description {
    margin-bottom: 40px !important;
}

.pspl-detail-description p {
    color: #e0e0e0 !important;
    font-size: 1.1rem !important;
    line-height: 1.6 !important;
    margin-bottom: 20px !important;
    font-weight: 300 !important;
}

.pspl-detail-gallery {
    display: flex !important;
    gap: 15px !important;
    margin-bottom: 40px !important;
    flex-wrap: wrap !important;
}

.pspl-detail-image {
    flex: 1 !important;
    min-width: 120px !important;
    height: 120px !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    border: 1px solid #333 !important;
}

.pspl-detail-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.3s ease !important;
}

.pspl-detail-image:hover img {
    transform: scale(1.05) !important;
}

.pspl-detail-actions {
    display: flex !important;
    gap: 20px !important;
    margin-top: auto !important;
    padding-top: 20px !important;
}

.pspl-detail-btn {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 15px 25px !important;
    border: 1px solid #444 !important;
    border-radius: 6px !important;
    color: #ffffff !important;
    text-decoration: none !important;
    font-size: 1rem !important;
    font-weight: 400 !important;
    transition: all 0.3s ease !important;
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(5px) !important;
    min-width: 120px !important;
    justify-content: center !important;
}

.pspl-detail-btn:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: #666 !important;
    transform: translateY(-2px) !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

.pspl-detail-btn.pspl-close-btn:hover {
    background: rgba(255, 82, 82, 0.2) !important;
    border-color: #ff5252 !important;
}

.pspl-detail-btn.pspl-buy-btn:hover {
    background: rgba(76, 175, 80, 0.2) !important;
    border-color: #4caf50 !important;
}

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

/* Portfolio Split Dual Button System */
.pspl-button {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 12px 20px !important;
    border: 1px solid #444 !important;
    border-radius: 4px !important;
    color: #ffffff !important;
    text-decoration: none !important;
    font-size: 0.9rem !important;
    font-weight: 400 !important;
    transition: all 0.3s ease !important;
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(5px) !important;
    min-width: 110px !important;
    justify-content: center !important;
    margin-bottom: 8px !important;
}

.pspl-button:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: #666 !important;
    transform: translateY(-1px) !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

.pspl-button.pspl-view-more-btn:hover {
    background: rgba(33, 150, 243, 0.2) !important;
    border-color: #2196f3 !important;
}

.pspl-button.pspl-buy-btn:hover {
    background: rgba(76, 175, 80, 0.2) !important;
    border-color: #4caf50 !important;
}

.pspl-button .button-text {
    color: inherit !important;
}

.pspl-button .button-icon {
    width: 14px !important;
    height: 14px !important;
    stroke: currentColor !important;
    flex-shrink: 0 !important;
}

/* Ensure contextual buttons show dual buttons */
.pspl-contextual-button {
    position: absolute !important;
    right: 25px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: all 0.3s ease !important;
    z-index: 100 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    background: rgba(0, 0, 0, 0.8) !important;
    backdrop-filter: blur(10px) !important;
    padding: 15px !important;
    border-radius: 8px !important;
    border: 1px solid #333 !important;
}

/* Show contextual buttons on hover */
.portfolio-split-item:hover .pspl-contextual-button,
.pspl-item-title-link:hover .pspl-contextual-button,
.pspl-item-title:hover ~ * .pspl-contextual-button,
.pspl-item-category:hover ~ .pspl-contextual-button {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Enhanced hover triggers for better compatibility */
.portfolio-split-item:hover .pspl-contextual-button,
.portfolio-split-item .pspl-item-title-link:hover ~ .pspl-contextual-button,
.portfolio-split-item .pspl-item-title-link:hover .pspl-contextual-button,
.portfolio-split-item .pspl-item-title-link-inner:hover ~ .pspl-contextual-button,
.portfolio-split-item .pspl-item-title:hover ~ * .pspl-contextual-button,
.portfolio-split-item .pspl-item-category-wrap:hover ~ .pspl-contextual-button {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Portfolio split section wrapper */
.portfolio-split-section {
    position: relative !important;
    z-index: 10;
    overflow: visible !important;
    background: #000 !important;
    min-height: 100vh !important;
    height: 100vh !important;
}

/* Main portfolio split container */
.portfolio-split {
    position: relative !important;
    height: 100vh !important;
    display: flex !important;
    background: #000 !important;
}

/* Portfolio split images container */
.portfolio-split-images {
    position: relative !important;
    width: 50% !important;
    height: 100vh !important;
    background-color: #121212 !important;
    overflow: hidden;
}

/* Images inner container */
.pspl-images-inner {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    background-color: #0a0a0a !important;
}

/* Individual image containers */
.pspl-image {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 0 !important;
    transition: opacity 0.5s ease !important;
    background: #222 !important;
}

.pspl-image.active {
    opacity: 1 !important;
}

.pspl-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

/* Portfolio split list (text side) */
.portfolio-split-list {
    position: relative !important;
    width: 50% !important;
    height: 100vh !important;
    padding: 40px 0 40px 60px !important; /* No right padding - text goes to edge */
    background: rgba(0, 0, 0, 0.85) !important;
    display: flex !important;
    align-items: center !important;
    backdrop-filter: blur(10px);
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    overflow: visible !important; /* Allow content to expand */
}

/* Inner container for list */
.pspl-inner {
    position: relative !important;
    width: 100% !important;
    max-width: none !important; /* Remove any max-width constraints */
    padding-right: 40px !important; /* Add some breathing room from screen edge */
}

/* Portfolio split items */
.portfolio-split-item {
    margin-bottom: clamp(15px, 4vh, 30px) !important; /* Reduced spacing for tighter layout */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: clamp(10px, 3vh, 20px) !important; /* Reduced padding */
    transition: all 0.3s ease;
    width: 100% !important; /* Ensure full width */
    max-width: none !important; /* Remove any width constraints */
    min-height: clamp(30px, 8vh, 60px) !important; /* Smaller minimum height to fit more content */
    overflow: visible !important; /* Allow content to expand */
}

.portfolio-split-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.portfolio-split-item:hover {
    border-bottom-color: rgba(243, 156, 18, 0.3);
    min-height: clamp(35px, 10vh, 70px) !important; /* Smaller hover height to prevent overflow */
}

/* Portfolio item titles - REMOVED TO AVOID CONFLICTS */

/* Remove conflicting title link styles that might interfere */

.pspl-item-category {
    color: #bbb !important;
    font-size: clamp(0.75rem, 1.5vw + 0.5rem, 1rem) !important; /* Responsive font size */
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 8px;
    font-weight: 500;
}

/* Contextual Shopify Button */
.pspl-contextual-button {
    position: absolute !important;
    right: 40px !important; /* Positioned from screen edge */
    top: 50% !important;
    transform: translateY(-50%) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    z-index: 10 !important;
    pointer-events: auto !important; /* Ensure buttons are clickable */
}

/* Show button on hover - multiple triggers for better compatibility */
.pspl-item-title-link:hover .pspl-contextual-button,
.portfolio-split-item:hover .pspl-contextual-button {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(-50%) translateX(0) !important;
}

.shopify-button {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%);
    color: #fff !important;
    text-decoration: none !important;
    border-radius: 25px;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 4px 15px rgba(243, 156, 18, 0.3);
    transition: all 0.3s ease;
    border: 2px solid transparent;
    cursor: pointer !important;
}

.shopify-button:hover {
    background: linear-gradient(135deg, #e67e22 0%, #d35400 100%);
    box-shadow: 0 6px 20px rgba(243, 156, 18, 0.4);
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.2);
    color: #fff !important;
    text-decoration: none !important;
}

.shopify-button .button-text {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.shopify-button .button-icon {
    width: 14px;
    height: 14px;
    transition: transform 0.3s ease;
}

.shopify-button:hover .button-icon {
    transform: translateX(2px);
}

/* Ghost text */
.pspl-ghost {
    position: absolute !important;
    bottom: clamp(20px, 4vh, 40px) !important;
    right: clamp(20px, 4vw, 40px) !important;
    font-size: clamp(3rem, 8vw, 5rem) !important; /* Responsive ghost text */
    color: rgba(255, 255, 255, 0.05) !important;
    font-weight: 900;
    font-family: 'Arial Black', sans-serif;
    pointer-events: none;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .portfolio-split-list {
        padding: clamp(20px, 4vh, 40px) clamp(15px, 3vw, 30px) !important;
    }
    
    .pspl-ghost {
        font-size: clamp(3rem, 8vw, 4rem) !important;
        bottom: clamp(15px, 3vh, 30px) !important;
        right: clamp(15px, 3vw, 30px) !important;
    }
}

@media (max-width: 992px) {
    /* Stack vertically on tablets */
    .portfolio-split {
        flex-direction: column !important;
        height: auto !important;
    }
    
    .portfolio-split-images,
    .portfolio-split-list {
        width: 100% !important;
        height: 50vh !important;
    }
    
    .portfolio-split-list {
        height: auto !important;
        min-height: 50vh !important;
        padding: clamp(20px, 4vh, 40px) 0 clamp(20px, 4vh, 40px) clamp(20px, 4vw, 40px) !important; /* Responsive padding */
    }
    
    .pspl-inner {
        padding-right: clamp(10px, 2vw, 20px) !important; /* Responsive right padding */
    }
    
    .pspl-contextual-button {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        margin-top: 15px;
        text-align: right;
    }
    
    .pspl-ghost {
        display: none;
    }
}

@media (max-width: 768px) {
    .portfolio-split-images {
        height: 40vh !important;
    }
    
    .portfolio-split-list {
        padding: 30px 0 30px 30px !important; /* Full width mobile - no right padding */
    }
    
    .pspl-inner {
        padding-right: 15px !important; /* Minimal right padding for mobile */
    }
    
    .portfolio-split-item {
        margin-bottom: clamp(15px, 3vh, 25px) !important;
        padding-bottom: clamp(10px, 2vh, 15px);
    }
    
    .shopify-button {
        padding: clamp(8px, 1.5vh, 10px) clamp(12px, 2vw, 16px);
        font-size: clamp(0.7rem, 1.2vw + 0.3rem, 0.85rem);
        border-radius: 20px;
    }
    
    .shopify-button .button-text {
        font-size: clamp(0.7rem, 1.2vw + 0.3rem, 0.85rem);
    }
    
    .shopify-button .button-icon {
        width: clamp(10px, 1.5vw, 12px);
        height: clamp(10px, 1.5vw, 12px);
    }
}

@media (max-width: 480px) {
    .portfolio-split-images {
        height: 35vh !important;
    }
    
    .portfolio-split-list {
        padding: clamp(10px, 2vh, 20px) 0 clamp(10px, 2vh, 20px) clamp(10px, 2vw, 20px) !important; /* Responsive minimal padding */
    }
    
    .pspl-inner {
        padding-right: clamp(5px, 1vw, 10px) !important; /* Responsive minimal right padding for small mobile */
    }
    
    .shopify-button {
        padding: clamp(6px, 1vh, 8px) clamp(8px, 1.5vw, 12px);
        font-size: clamp(0.65rem, 1vw + 0.3rem, 0.8rem);
    }
    
    .pspl-contextual-button {
        margin-top: clamp(5px, 1vh, 10px);
    }
}

/* Inner container for list */
.pspl-inner {
    position: relative;
    width: 100%;
    max-width: none !important; /* Remove width constraint - allow full width */
}

/* Ghost text background */
.pspl-ghost {
    position: absolute;
    display: block;
    bottom: clamp(80px, 15vh, 140px);
    right: 3.5%;
    font-size: clamp(8vh, 15vh, 20vh); /* Responsive font size based on viewport height */
    font-weight: 800;
    color: #fff;
    line-height: 0.7;
    opacity: 0.07;
    z-index: 0;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-family: 'Syne', sans-serif;
}

/* Reversed layout ghost positioning */
.portfolio-split.pspl-reverse .pspl-ghost {
    left: 3.5%;
    right: auto;
}

/* Portfolio split items */
.portfolio-split-item {
    position: relative;
    margin-bottom: 60px;
}

/* Portfolio split item links - CLEANED UP */
.pspl-item-title-link {
    position: relative !important;
    display: block !important;
    padding: clamp(8px, 2vh, 16px) 0 !important; /* Reduced padding for tighter layout */
    text-decoration: none !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    width: 100% !important;
    max-width: none !important;
}

/* Add counter to items */
.portfolio-split-list {
    counter-reset: pspl-item-counter;
}

.pspl-item-title-link::before {
    position: absolute;
    counter-increment: pspl-item-counter;
    content: "" counter(pspl-item-counter, decimal-leading-zero);
    top: 10px;
    right: -20px;
    line-height: 1;
    font-size: 14px;
    font-weight: 300;
    color: #666;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

/* Title link inner container - FIXED FOR ANIMATION */
.pspl-item-title-link-inner {
    position: relative !important;
    overflow: hidden !important;
    height: auto !important; /* Auto height to prevent truncation */
    min-height: clamp(1rem, min(3vw + 0.3rem, 2.5vh + 0.2rem), 2rem) !important; /* Flexible minimum height */
    display: block !important;
    width: 100% !important;
    max-width: none !important;
}

/* Portfolio item titles - CLEAN SYNCHRONIZED VERTICAL ANIMATION */
.pspl-item-title,
.pspl-item-hover-title {
    font-size: clamp(0.9rem, min(3vw + 0.2rem, 2vh + 0.2rem), 1.8rem) !important; /* Smaller font sizes to prevent truncation */
    font-weight: 700 !important;
    line-height: 1.1 !important; /* Tighter line height */
    margin: 0 !important;
    color: #fff !important;
    white-space: nowrap !important;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    font-family: 'Syne', sans-serif !important;
    display: block !important;
    width: 100% !important;
    height: auto !important; /* Auto height to prevent truncation */
    min-height: clamp(1rem, min(3vw + 0.3rem, 2.5vh + 0.2rem), 2rem) !important; /* Flexible minimum height */
}

/* Regular title - VISIBLE BY DEFAULT */
.pspl-item-title {
    position: relative !important;
    opacity: 1 !important;
    transform: translate3d(0, 0, 0) !important;
    z-index: 2 !important;
}

/* Hover title positioning - STARTS BELOW, HIDDEN */
.pspl-item-hover-title {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    opacity: 0 !important;
    transform: translate3d(0, 100%, 0) !important;
    color: #f39c12 !important;
    z-index: 1 !important;
}

/* Hover effects - SYNCHRONIZED VERTICAL MOVEMENT */
/* Updated to work on entire container, not just the link */
.portfolio-split-item:hover .pspl-item-title,
.pspl-item-title-link:hover .pspl-item-title {
    opacity: 0 !important;
    transform: translate3d(0, -100%, 0) !important;
}

.portfolio-split-item:hover .pspl-item-hover-title,
.pspl-item-title-link:hover .pspl-item-hover-title {
    opacity: 1 !important;
    transform: translate3d(0, 0, 0) !important;
}

/* Global hover state */
.portfolio-split.hovered .pspl-item-title {
    opacity: 0.5;
}

.portfolio-split.hovered .pspl-item-category-wrap,
.portfolio-split.hovered .pspl-item-title-link::before {
    opacity: 0.3;
}

.portfolio-split.hovered .portfolio-split-item:hover .pspl-item-title,
.portfolio-split.hovered .pspl-item-title-link:hover .pspl-item-title {
    opacity: 1;
}

.portfolio-split.hovered .portfolio-split-item:hover .pspl-item-category-wrap,
.portfolio-split.hovered .pspl-item-title-link:hover .pspl-item-category-wrap {
    opacity: 0.9;
}

.portfolio-split.hovered .portfolio-split-item:hover::before,
.portfolio-split.hovered .pspl-item-title-link:hover::before {
    opacity: 0.7;
}

/* Category styling */
.pspl-item-category-wrap {
    margin-top: clamp(1px, 0.5vh, 3px) !important; /* Reduced margin for tighter spacing */
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

.pspl-item-category {
    display: inline-block;
    font-size: clamp(11px, min(2vw + 0.1rem, 1.5vh + 0.1rem), 16px) !important; /* Smaller category text to fit better */
    font-weight: 400;
    color: #ccc;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-family: 'Poppins', sans-serif;
    line-height: 1.1 !important; /* Tighter line height */
}

/* Responsive Design */
@media (max-width: 1400px) {
    .portfolio-split-images {
        width: 45%;
    }
    
    .portfolio-split-list {
        width: 55%;
        margin-left: 45%;
    }
    
    .portfolio-split.pspl-reverse .portfolio-split-list {
        margin-left: 0;
    }
}

@media (max-width: 1024px) {
    .portfolio-split {
        height: auto;
        min-height: 100vh;
    }
    
    .portfolio-split-images {
        position: relative;
        width: 100%;
        height: 50vh;
        z-index: 1;
    }
    
    .portfolio-split-images::before {
        position: absolute;
        content: "";
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.4);
        z-index: 1;
    }
    
    .portfolio-split-list {
        position: relative;
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        padding: 80px 5% 60px;
        min-height: 50vh;
    }
    
    .pspl-ghost {
        display: none;
    }
    
    .pspl-item-title,
    .pspl-item-hover-title {
        font-size: 36px;
    }
}

@media (max-width: 768px) {
    .portfolio-split-list {
        padding: 60px 20px 40px;
    }
    
    .pspl-item-title,
    .pspl-item-hover-title {
        font-size: 28px;
    }
    
    .portfolio-split-item {
        margin-bottom: 40px;
    }
}

/* Dark mode integration */
.section.dark-mode .portfolio-split-list {
    background: rgba(10, 10, 10, 0.98);
}

.section.dark-mode .pspl-item-title,
.section.dark-mode .pspl-item-hover-title {
    color: #fff;
}

.section.dark-mode .pspl-item-hover-title {
    color: #f39c12;
}

.section.dark-mode .pspl-item-category {
    color: #ccc;
}

/* Integration with existing theme */
.portfolio-split-section {
    position: relative;
    z-index: 1;
}

.portfolio-split-section .the-wrapper {
    position: relative;
    height: 100vh;
    overflow: hidden;
}

/* ELEGANT GOLD GLOW BUTTON STYLES */
.pspl-inline-buttons {
    position: absolute !important;
    right: 40px !important;
    top: 45% !important; /* Moved up from 50% */
    transform: translateY(-50%) !important;
    display: flex !important;
    gap: 20px !important;
    align-items: center !important;
    z-index: 100 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1) !important;
    
    /* Subtle container background */
    background: rgba(0, 0, 0, 0.1) !important;
    padding: 12px 16px !important;
    border-radius: 50px !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

/* Show buttons on item hover */
.portfolio-split-item:hover .pspl-inline-buttons,
.pspl-item-title-link:hover ~ .pspl-inline-buttons {
    opacity: 1 !important;
    visibility: visible !important;
}

.pspl-inline-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 72px !important; /* Increased from 60px (20% larger) */
    height: 72px !important; /* Increased from 60px (20% larger) */
    border-radius: 50% !important;
    color: #ffffff !important;
    text-decoration: none !important;
    position: relative !important;
    overflow: hidden !important;
    
    /* Subtle background with gold inner glow */
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 215, 0, 0.2) !important;
    box-shadow: 
        inset 0 0 20px rgba(255, 215, 0, 0.1),
        0 0 10px rgba(255, 215, 0, 0.05) !important;
    
    /* Smooth scale transition */
    transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1) !important;
}

.pspl-inline-btn:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 215, 0, 0.4) !important;
    transform: scale(1.15) !important;
    color: #ffffff !important;
    box-shadow: 
        inset 0 0 30px rgba(255, 215, 0, 0.2),
        0 0 20px rgba(255, 215, 0, 0.1) !important;
}

/* Gift emoji styling with warm background */
.pspl-buy-btn {
    font-size: 40px !important; /* Increased from 34px for better visibility */
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif !important;
    
    /* Subtle warm background - very low saturation gold */
    background: rgba(255, 235, 180, 0.02) !important; /* Reduced from 0.06 for lighter appearance */
    border-color: rgba(255, 215, 0, 0.1) !important; /* Also reduced border opacity */
}

.pspl-buy-btn:hover {
    background: rgba(255, 235, 180, 0.12) !important;
    border-color: rgba(255, 215, 0, 0.3) !important;
}

/* SVG ellipsis dots styling */
.pspl-view-more-btn svg {
    display: block !important;
    transition: all 0.3s ease !important;
    fill: #ffffff !important;
    opacity: 0.9 !important;
    width: 24px !important; /* Increased from 16px */
    height: 24px !important; /* Increased from 16px */
}

.pspl-view-more-btn:hover svg {
    opacity: 1 !important;
    fill: #ffffff !important;
    filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.5)) !important;
}

/* View more button styling with cool background - matching saturation */
.pspl-view-more-btn {
    /* Subtle cool background - low saturation blue to match gold intensity */
    background: rgba(180, 210, 255, 0.06) !important;
    border-color: rgba(135, 206, 235, 0.15) !important;
}

.pspl-view-more-btn:hover {
    background: rgba(180, 210, 255, 0.12) !important;
    border-color: rgba(135, 206, 235, 0.3) !important;
}

/* Ensure FontAwesome solid icons are properly displayed */
.pspl-buy-btn .fas.fa-cart-shopping {
    font-weight: 900 !important; /* FontAwesome solid weight */
    font-size: 26px !important;
}

/* Fallback for when FontAwesome doesn't load - show emoji instead */
.pspl-buy-btn .fas.fa-cart-shopping:before {
    content: "🛒" !important; /* Shopping cart emoji fallback */
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif !important;
    font-size: 24px !important;
}

/* Buy button specific styling */
.pspl-buy-btn {
    background: rgba(255, 193, 7, 0.3) !important; /* More visible background */
    border-color: rgba(255, 193, 7, 0.7) !important; /* More visible border */
}

.pspl-buy-btn:hover {
    background: rgba(255, 193, 7, 0.5) !important;
    border-color: rgba(255, 193, 7, 1) !important;
}

/* View more button specific styling */
.pspl-view-more-btn {
    background: rgba(74, 144, 226, 0.3) !important; /* Blue background */
    border-color: rgba(74, 144, 226, 0.7) !important;
}

.pspl-view-more-btn:hover {
    background: rgba(74, 144, 226, 0.5) !important;
    border-color: rgba(74, 144, 226, 1) !important;
}

/* Fallback content for icons in case Line Awesome doesn't load */
.pspl-buy-btn i::before {
    content: "�" !important; /* Credit card emoji as fallback */
    font-family: inherit !important;
}

.pspl-view-more-btn i::before {
    content: "⋯" !important; /* Horizontal ellipsis as fallback */
    font-family: inherit !important;
}

.pspl-buy-btn:hover {
    background: rgba(255, 193, 7, 0.4) !important;
    border-color: rgba(255, 193, 7, 0.8) !important;
}

/* View more button specific styling */
.pspl-view-more-btn {
    background: rgba(13, 110, 253, 0.2) !important;
    border-color: rgba(13, 110, 253, 0.5) !important;
}

.pspl-view-more-btn:hover {
    background: rgba(13, 110, 253, 0.4) !important;
    border-color: rgba(13, 110, 253, 0.8) !important;
}

/* Responsive Design for Vertical Space - SMOOTH SCALING */
@media (max-height: 800px) {
    .pspl-story-list {
        padding-top: clamp(10px, 3vh, 40px) !important;
    }
    
    .pspl-story-list .section-title {
        margin-bottom: clamp(15px, 4vh, 40px) !important;
    }
    
    .pspl-story-list .inner-divider {
        margin: clamp(0px, 0.5vh, 3px) auto !important; /* Further reduced from clamp(2px, 1vh, 8px) for even tighter spacing */
    }
}

@media (max-height: 600px) {
    .pspl-story-list {
        padding-top: clamp(5px, 2vh, 20px) !important;
    }
    
    .pspl-story-list .section-title {
        margin-bottom: clamp(10px, 3vh, 20px) !important;
    }
    
    .pspl-story-list .inner-divider {
        margin: clamp(0px, 0.5vh, 2px) auto !important; /* Very tight spacing for small screens */
    }
}

@media (max-height: 400px) {
    .pspl-story-list {
        padding-top: clamp(2px, 1vh, 10px) !important;
    }
    
    .pspl-story-list .section-title {
        margin-bottom: clamp(5px, 2vh, 15px) !important;
    }
    
    .pspl-story-list .inner-divider {
        margin: clamp(0px, 0.2vh, 1px) auto !important; /* Minimal spacing for very small screens */
    }
}

/* ======================================================================= */
/* SCOPED RESPONSIVE SOLUTION - PORTFOLIO SPLIT ITEMS ONLY */
/* ======================================================================= */

/* Target ONLY the portfolio split items within this specific section */
.portfolio-split-list .portfolio-split-item {
    /* Convert each item to a flexbox row with space reservation */
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important; /* Prevent wrapping to maintain side-by-side layout */
    gap: clamp(1rem, 3vw, 2rem) !important; /* Responsive gap between text and button space */
    width: 100% !important;
    position: relative !important;
}

/* Text container - takes available space, MUST shrink to fit */
.portfolio-split-list .portfolio-split-item .pspl-item-title-link {
    flex: 1 1 0 !important; /* Take available space, can shrink to zero if needed */
    min-width: 0 !important; /* Allow shrinking below content size */
    max-width: calc(100% - 140px) !important; /* Reserve space for button container */
    overflow: hidden !important; /* Prevent text overflow */
}

/* Make titles responsive and prevent truncation */
.portfolio-split-list .portfolio-split-item .pspl-item-title,
.portfolio-split-list .portfolio-split-item .pspl-item-hover-title {
    font-size: clamp(1rem, 2vw, 2.5rem) !important; /* Responsive scaling - more conservative */
    white-space: nowrap !important; /* Keep on one line initially */
    overflow: hidden !important; /* Hide overflow */
    text-overflow: ellipsis !important; /* Add ellipsis if text is too long */
    width: 100% !important;
    max-width: 100% !important;
}

/* INVISIBLE BUTTON SPACE CONTAINER - Reserves space for buttons */
.portfolio-split-list .portfolio-split-item::after {
    content: "" !important;
    flex: 0 0 120px !important; /* Fixed width space reservation */
    height: 60px !important; /* Match button container height */
    visibility: hidden !important; /* Invisible but takes up space */
    pointer-events: none !important;
}

/* Button container - positioned within the reserved space */
.portfolio-split-list .portfolio-split-item .pspl-inline-buttons {
    position: absolute !important;
    right: 20px !important; /* Position within the reserved space */
    top: 50% !important;
    transform: translateY(-50%) !important;
    opacity: 0 !important; /* Hidden by default */
    visibility: hidden !important;
    flex-shrink: 0 !important;
    display: flex !important;
    gap: 12px !important;
    background: rgba(0, 0, 0, 0.8) !important;
    padding: 12px 16px !important;
    border-radius: 50px !important;
    backdrop-filter: blur(10px) !important;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    z-index: 100 !important;
    width: auto !important; /* Let content determine width */
    min-width: 120px !important; /* Minimum width for two buttons */
}

/* SHOW buttons when item is hovered */
.portfolio-split-list .portfolio-split-item:hover .pspl-inline-buttons,
.portfolio-split-list .portfolio-split-item .pspl-item-title-link:hover ~ .pspl-inline-buttons {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(-50%) translateX(0) !important;
}

/* Circular button styling */
.portfolio-split-list .portfolio-split-item .pspl-inline-btn {
    width: 48px !important; /* Fixed circular size */
    height: 48px !important;
    border-radius: 50% !important; /* Perfect circle */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px !important; /* Icon size */
    padding: 0 !important; /* No padding for circles */
    background: rgba(255, 255, 255, 0.15) !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    color: #ffffff !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
}

.portfolio-split-list .portfolio-split-item .pspl-inline-btn:hover {
    background: rgba(255, 255, 255, 0.25) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    transform: translateY(-2px) scale(1.05) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3) !important;
}

/* Special styling for buy button (gift icon) */
.portfolio-split-list .portfolio-split-item .pspl-buy-btn:hover {
    background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%) !important;
    border-color: #f39c12 !important;
    box-shadow: 0 6px 20px rgba(243, 156, 18, 0.4) !important;
}

/* Special styling for view more button */
.portfolio-split-list .portfolio-split-item .pspl-view-more-btn:hover {
    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%) !important;
    border-color: #3498db !important;
    box-shadow: 0 6px 20px rgba(52, 152, 219, 0.4) !important;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .portfolio-split-list .portfolio-split-item {
        flex-wrap: wrap !important; /* Allow wrapping on mobile */
        gap: 1rem !important;
    }

    /* Remove space reservation on mobile */
    .portfolio-split-list .portfolio-split-item::after {
        display: none !important;
    }

    .portfolio-split-list .portfolio-split-item .pspl-item-title,
    .portfolio-split-list .portfolio-split-item .pspl-item-hover-title {
        font-size: clamp(1.1rem, 4vw, 2rem) !important;
        white-space: normal !important; /* Allow text wrapping on mobile */
        line-height: 1.3 !important;
        overflow: visible !important;
        text-overflow: unset !important;
    }

    .portfolio-split-list .portfolio-split-item .pspl-item-title-link {
        flex-basis: 100% !important; /* Take full width on mobile */
        max-width: 100% !important; /* Remove width restriction on mobile */
        margin-bottom: 0.5rem !important;
    }

    /* Mobile button positioning */
    .portfolio-split-list .portfolio-split-item .pspl-inline-buttons {
        position: static !important; /* Remove absolute positioning on mobile */
        opacity: 1 !important; /* Always visible on mobile */
        visibility: visible !important;
        transform: none !important;
        margin-top: 10px !important;
        justify-content: center !important;
        background: rgba(0, 0, 0, 0.6) !important;
        min-width: auto !important;
    }

    /* Smaller circular buttons on mobile */
    .portfolio-split-list .portfolio-split-item .pspl-inline-btn {
        width: 42px !important;
        height: 42px !important;
        font-size: 16px !important;
    }
}

/* Very small screens */
@media (max-width: 480px) {
    .portfolio-split-list .portfolio-split-item {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.8rem !important;
    }

    /* Remove space reservation on small screens */
    .portfolio-split-list .portfolio-split-item::after {
        display: none !important;
    }

    .portfolio-split-list .portfolio-split-item .pspl-item-title,
    .portfolio-split-list .portfolio-split-item .pspl-item-hover-title {
        font-size: 1.4rem !important;
        overflow: visible !important;
        text-overflow: unset !important;
    }

    .portfolio-split-list .portfolio-split-item .pspl-item-title-link {
        max-width: 100% !important;
    }

    /* Center buttons on very small screens */
    .portfolio-split-list .portfolio-split-item .pspl-inline-buttons {
        width: 100% !important;
        justify-content: center !important;
        position: static !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        min-width: auto !important;
    }

    /* Even smaller buttons for tiny screens */
    .portfolio-split-list .portfolio-split-item .pspl-inline-btn {
        width: 38px !important;
        height: 38px !important;
        font-size: 14px !important;
    }
}