/*Add custom styles to the skin here */
#PayPalExpressScriptContainerIdentifier{
max-height:35px;
overflow:hidden;
}

/**
 * FIX: Popular Category Island Hydration Timing
 *
 * Problem: Category grid items use tw-opacity-0 initially, then animate in.
 * This causes a flash where server-rendered content disappears when React
 * hydrates, then reappears with animation. This hurts LCP and causes CLS.
 *
 * Solution:
 * 1. Make #shop-categories items visible by default (override tw-opacity-0)
 * 2. Let the animation run if needed, but start from visible state
 * 3. Ensure content never disappears during hydration
 *
 * This makes the billboard and category grid appear at the same time since
 * both are now visible from the initial server render through hydration.
 *
 * @see docs/HYDRATION_PERFORMANCE_AUDIT.md
 */

/* Override initial opacity-0 for category grid items when above the fold */
#shop-categories .tw-opacity-0 {
    opacity: 1 !important;
}

/* Let animation run but start from visible state (no flash) */
#shop-categories .tw-animate-category-reveal {
    opacity: 1;
    animation: none; /* Remove staggered animation to prevent timing issues */
}

/* For users who scroll to category section, apply subtle entrance */
@media (prefers-reduced-motion: no-preference) {
    #shop-categories[data-visible="entering"] .tw-animate-category-reveal {
        animation: category-subtle-entrance 0.3s ease-out forwards;
    }
}

@keyframes category-subtle-entrance {
    from {
        opacity: 0.8;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Ensure SEO fallback matches React component layout to prevent CLS */
[data-component="HomeCategoryGrid"]:not([data-hydrated]) > section {
    visibility: visible !important;
    opacity: 1 !important;
}

/* Smooth handoff from SEO fallback to React component */
[data-component="HomeCategoryGrid"][data-hydrated] > section {
    visibility: visible;
    opacity: 1;
}

/**
 * FIX: Klevu Carousel Section Height
 *
 * Problem: After full-resolution billboard, .home-section.bg-dark sections
 * have excessive height causing Klevu carousels to be "blocked in" by
 * large dark margins.
 *
 * Root Cause: @responsive-padding-md = calc(80px + 12*((100vw - 768px)/300))
 * At 1068px viewport = 120px padding per side = 240px total vertical padding
 * At 1368px viewport = 160px padding per side = 320px total vertical padding
 *
 * Solution: Override with higher specificity using body prefix to beat
 * tapestry.min.css which loads after custom.css
 */

/* Remove viewport-based min-height from home sections */
/* Using body prefix for higher specificity to win over tapestry.min.css */
body .home-section {
    min-height: auto !important;
    padding: 1rem 0 !important; /* Tighter padding - was 2rem */
}

/* More specific selector for bg-dark sections containing Klevu */
body .home-section.bg-dark {
    min-height: auto !important;
    height: auto !important;
    padding: 1rem 0 !important; /* Tighter padding - was 2rem */
}

/* Klevu recs container should fit content */
body .home-section .klevu-recs,
body .home-section [class*="klevu"] {
    min-height: auto !important;
}

/* Target the nested section structure from CMS Topic */
/* Structure: .home-section.bg-dark > section > .container > .klevu-recs */
body .home-section.bg-dark > section {
    padding: 0 !important;
    margin: 0 !important;
}

body .home-section.bg-dark > section > .container {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Override any Klevu CDN-injected spacing */
body .home-section.bg-dark [id^="k-"],
body .home-section.bg-dark .kuSlider,
body .home-section.bg-dark .kuRecsContainer,
body .home-section.bg-dark .ku-recs-block {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Target Klevu carousel headings and titles */
body .home-section.bg-dark h1,
body .home-section.bg-dark h2,
body .home-section.bg-dark h3,
body .home-section.bg-dark .kuTitle,
body .home-section.bg-dark .ku-title {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
}

/* Klevu product cards container */
body .home-section.bg-dark .kuProducts,
body .home-section.bg-dark .ku-products {
    margin-bottom: 0.5rem !important;
    padding-bottom: 0 !important;
}