/* Unique numeric suffix for this product: 32165498701234567890 */

/* Keyframes for image slide animations */
@keyframes _fic_slide-out-left {
  from { transform: translateX(0); opacity: 1; }
  to { transform: translateX(-100%); opacity: 0; }
}

@keyframes _fic_slide-in-right {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* Keyframes for text fade animations */
@keyframes _fic_fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes _fic_fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Image slide classes */
._fic_slide-out { animation: _fic_slide-out-left 0.38s ease-in-out forwards !important; }
._fic_slide-in  { animation: _fic_slide-in-right 0.38s ease-in-out forwards !important; }

/* Suffixed text animation classes */
._ccf_fade-out-32165498701234567890 { animation: _fic_fade-out 0.28s ease-in forwards !important; }
._ccf_fade-in-32165498701234567890  { animation: _fic_fade-in  0.28s ease-out forwards !important; }
._ccf_text-slide-out-32165498701234567890 { animation: _fic_slide-out-left  0.38s ease-in-out forwards !important; }
._ccf_text-slide-in-32165498701234567890  { animation: _fic_slide-in-right  0.38s ease-in-out forwards !important; }

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

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

/* Ensure caption title can wrap into up to two lines (override other product CSS)
   - Uses line-clamp so long titles split across two lines instead of shrinking
   - Keeps a unique numeric suffix for project-wide uniqueness: 32165498701234567890 */
#ccf-isolated-container .ccf-image-text-below-image .ccf-product-category-title {
  white-space: normal !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  max-width: 100% !important;
  /* Increase base font-size slightly so it's visibly larger (approx. 16px).
     This should override other styles; keep unique suffix: 32165498701234567890 */
  font-size: 1rem !important; /* 1rem * 16px = 16px (typical root) */
  line-height: 1.15 !important;
  /* Ensure the container height fits two lines exactly (prevents layout jump) */
  max-height: calc(1.15em * 2) !important;
  /* Slightly tighten letter spacing for long titles to improve fit */
  letter-spacing: -0.01em !important;
}

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

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

/* Ensure text truncation if it exceeds width */
#ccf-isolated-container .ccf-image-text-below-image .ccf-product-category-title {
  text-overflow: ellipsis !important;
}

/* Brochure-specific form title gradient (copied and adapted from Bulk Flyers styling)
   - Applied only to the H1 form title we added the class to: _env_form-title-gradient-32165498701234567890
   - Uses gradient text with a soft shadow and a readable fallback color.
   - Keeping high specificity to avoid being overridden by shared templates. */
#ccf-isolated-container .ccf-form-options-container .ccf-form-container > h1._env_form-title-gradient-32165498701234567890 {
    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;
}

/* Prefers-reduced-motion rules */
@media (prefers-reduced-motion: reduce) {
  ._fic_slide-out, ._fic_slide-in, 
  ._ccf_text-slide-out-32165498701234567890, ._ccf_text-slide-in-32165498701234567890,
  ._ccf_fade-in-32165498701234567890, ._ccf_fade-out-32165498701234567890 { animation-duration: 0.001s !important; }
  #ccf-isolated-container .ccf-product-main-image { transition-duration: 0.01s !important; }
}