/* Bookmarks Product Image Carousel CSS */
/* Unique suffix: 92746130518207439 */

/* Purple gradient effect for form title */
#ccf-isolated-container .ccf-form-options-container .ccf-form-container > h1._bm_form-title-gradient-92746130518207439 {
    color: #7c3aed !important; /* fallback */
    background-image: linear-gradient(90deg, #6d28d9, #a78bfa) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    text-shadow: 0 10px 24px rgba(109, 40, 217, 0.28), 0 2px 6px rgba(17, 24, 39, 0.12) !important;
    font-weight: 800;
    font-size: 1.5rem;
    line-height: 1.08;
    margin-bottom: 0.2rem;
}

/* Fixed-width desktop layout and responsive mobile layout */
@media (min-width: 900px) {
    #ccf-isolated-container .ccf-product-image-container { 
        width: 450px !important; 
        flex: 0 0 450px !important; 
        max-width: 450px !important; 
    }
}
@media (max-width: 899px) {
    #ccf-isolated-container .ccf-product-image-container { 
        width: 100% !important; 
        flex: 0 0 100% !important; 
        max-width: 100% !important; 
    }
}

/* Smooth zoom hover effect with accelerated enter and smooth return */
#ccf-isolated-container .ccf-product-main-image {
    transition: transform 1s cubic-bezier(0.2, 0.9, 0.2, 1) !important;
    cursor: zoom-in;
}
#ccf-isolated-container .ccf-product-main-image:hover {
    transform: scale(1.12) !important;
    z-index: 10 !important;
}

/* Animation keyframes */
@keyframes _bm_fade-out-92746130518207439 {
    0% { opacity: 1; }
    100% { opacity: 0; }
}
@keyframes _bm_fade-in-92746130518207439 {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
@keyframes _bm_text-slide-out-92746130518207439 {
    0% { transform: translateX(0); opacity: 1; }
    100% { transform: translateX(-100%); opacity: 0; }
}
@keyframes _bm_text-slide-in-92746130518207439 {
    0% { transform: translateX(100%); opacity: 0; }
    100% { transform: translateX(0); opacity: 1; }
}

/* Suffixed animation classes */
#ccf-isolated-container ._bm_fade-out-92746130518207439 { 
    animation: _bm_fade-out-92746130518207439 0.28s ease-in forwards !important; 
}
#ccf-isolated-container ._bm_fade-in-92746130518207439 { 
    animation: _bm_fade-in-92746130518207439 0.28s ease-out forwards !important; 
}
#ccf-isolated-container ._bm_text-slide-out-92746130518207439 { 
    animation: _bm_text-slide-out-92746130518207439 0.38s cubic-bezier(0.6, -0.28, 0.735, 0.045) forwards !important; 
}
#ccf-isolated-container ._bm_text-slide-in-92746130518207439 { 
    animation: _bm_text-slide-in-92746130518207439 0.38s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards !important; 
}

/* Title shrink-to-fit behavior (MANDATORY) */
#ccf-isolated-container .ccf-image-text-below-image .ccf-product-category-title {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: clip !important; /* NO ELLIPSIS */
    max-width: 100% !important;
}

/* Size note animation classes */
#ccf-isolated-container ._bm_size-note-out-92746130518207439 { 
    animation: _bm_text-slide-out-92746130518207439 0.36s ease forwards !important; 
}
#ccf-isolated-container ._bm_size-note-in-92746130518207439 { 
    animation: _bm_text-slide-in-92746130518207439 0.36s ease forwards !important; 
}

/* Accessibility: reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    #ccf-isolated-container ._bm_slide-out, 
    #ccf-isolated-container ._bm_slide-in, 
    #ccf-isolated-container ._bm_text-slide-out-92746130518207439, 
    #ccf-isolated-container ._bm_text-slide-in-92746130518207439,
    #ccf-isolated-container ._bm_fade-in-92746130518207439, 
    #ccf-isolated-container ._bm_fade-out-92746130518207439,
    #ccf-isolated-container ._bm_size-note-out-92746130518207439,
    #ccf-isolated-container ._bm_size-note-in-92746130518207439 { 
        animation-duration: 0.001s !important; 
    }
    #ccf-isolated-container .ccf-product-main-image { 
        transition-duration: 0.01s !important; 
    }
}

/* Responsive title width constraints - same as envelopes */
@media (min-width: 1024px) {
  #ccf-isolated-container .ccf-image-text-below-image .ccf-product-category-title {
    max-width: 450px !important;
    width: 450px !important;
  }
}

@media (max-width: 1023px) {
  #ccf-isolated-container .ccf-image-text-below-image .ccf-product-category-title {
    max-width: 80% !important;
    width: 80% !important;
  }
}