/* Product-scoped carousel & title-fit overrides for Digital T-Shirts
   Suffix: 92746130518207439
   NOTE: This file is intentionally product-scoped and loaded after style.css
*/

/* --- Keyframes (reused names from global file where appropriate) --- */
@keyframes _ccf_fade-out { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-6px); } }
@keyframes _ccf_fade-in  { 0% { opacity: 0; transform: translateY(6px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes _ccf_text-slide-out { 0% { transform: translateX(0%); opacity: 1; } 100% { transform: translateX(-100%); opacity: 0; } }
@keyframes _ccf_text-slide-in  { 0% { transform: translateX(100%); opacity: 0; } 100% { transform: translateX(0%); opacity: 1; } }

/* --- Suffixed text animation classes (unique to this product) --- */
#ccf-isolated-container ._ccf_fade-out-92746130518207439 { animation: _ccf_fade-out 0.32s ease-in forwards !important; }
#ccf-isolated-container ._ccf_fade-in-92746130518207439  { animation: _ccf_fade-in  0.5s ease-out forwards !important; }

#ccf-isolated-container ._ccf_text-slide-out-92746130518207439 { animation: _ccf_text-slide-out 0.36s ease-in forwards !important; }
#ccf-isolated-container ._ccf_text-slide-in-92746130518207439  { animation: _ccf_text-slide-in  0.36s ease-out forwards !important; }

/* --- Ensure image slide classes (global names are compatible) --- */
/* _ccf_slide-out and _ccf_slide-in are defined in style.css already and will be reused. */

/* --- Fixed desktop column width (450px) --- */
@media (min-width: 900px) {
  #ccf-isolated-container .ccf-product-image-container {
    width: 450px !important;
    flex: 0 0 450px !important;
    max-width: 450px !important;
  }
}
/* Mobile: image column full width */
@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 (1s accelerated enter, smooth return) --- */
/* Use !important so this transition rule overrides inline transition attributes and prevents an instant jump. */
#ccf-isolated-container .ccf-product-main-image {
  transition: transform 1s cubic-bezier(0.25, 0.9, 0.2, 1), opacity 300ms ease !important;
  will-change: transform;
  transform-origin: center center;
}
#ccf-isolated-container .ccf-product-main-image:hover {
  transform: scale(1.12) !important;
  z-index: 10 !important;
}

/* --- Size-note visibility & base style (keeps same look as .ccf-form-note) --- */
#ccf-isolated-container #ccf-size-note {
  font-size: 0.75rem;
  color: #4a5c79;
  margin-top: 0.2rem;
  display: none; /* JS will toggle to block when populated */
  transition: opacity 0.28s ease, transform 0.28s ease;
}

/* Use suffixed classes for animating the size-note reliably */
#ccf-isolated-container ._ccf_text-out-92746130518207439 { animation: _ccf_text-slide-out 0.32s ease forwards !important; }
#ccf-isolated-container ._ccf_text-in-92746130518207439  { animation: _ccf_text-slide-in  0.32s ease forwards !important; }

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

/* --- Small helper to ensure caption area clipping behaves well when JS adjusts font-size --- */
#ccf-isolated-container .ccf-image-text-below-image {
  overflow: hidden;
  box-sizing: border-box;
  /* Constrain caption area to the image column width and center it.
     This ensures the title never visually extends beyond the image/carousel. */
  max-width: 450px !important;
  width: 100% !important;
  margin: 0 auto !important;
  text-align: center !important;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

/* Ensure the caption title strictly respects the caption container width. */
#ccf-isolated-container .ccf-image-text-below-image .ccf-product-category-title {
  box-sizing: border-box !important;
  transform: none !important;
}

/* Mobile: allow the caption to be up to 80% of the viewport/product column on small screens */
@media (max-width: 899px) {
  #ccf-isolated-container .ccf-image-text-below-image {
    max-width: 80% !important;
  }
}

/* --- Scoped purple gradient for H1 form title (unique to this product) --- */
#ccf-isolated-container .ccf-form-options-container .ccf-form-container > h1._ccf_form-title-gradient-92746130518207439 {
  color: #7c3aed !important;
  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;
}

/* END of product-scoped form-image-carousel.css */