/**
 * Collection Cards Shortcode Styles
 * 
 * Responsive card grid for displaying collections
 * - Desktop: 3-column CSS Grid
 * - Mobile: Horizontal carousel or scrollable grid
 * 
 * @package DHT1230_Collections
 */

/* ==========================================================================
   Wrapper Container
   ========================================================================== */

/**
 * Main wrapper - ensures 100% width of parent container
 * No fixed margins to allow full-width flexibility
 */
.collection-cards-wrapper {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ==========================================================================
   Desktop Layout - CSS Grid (3 columns)
   ========================================================================== */

/**
 * Desktop grid container
 * Uses CSS Grid with 3 equal columns
 * Gap is customizable via data attribute
 */
.collection-cards-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    width: 100%;
    box-sizing: border-box;
}

/**
 * Dynamic gap based on shortcode attribute
 * Applied via inline style or JavaScript
 */
.collection-cards-wrapper[data-gap="16"] .collection-cards-container {
    gap: 16px;
}

.collection-cards-wrapper[data-gap="24"] .collection-cards-container {
    gap: 24px;
}

.collection-cards-wrapper[data-gap="32"] .collection-cards-container {
    gap: 32px;
}

/* ==========================================================================
   Individual Card Styles
   ========================================================================== */

/**
 * Card container - fully clickable
 * Entire card acts as a link for better UX (Fitts's Law)
 */
.collection-card {
    position: relative;
    display: block;
    text-decoration: none;
    color: inherit;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}


/* ======================================================================
   Theme BC25 - Collection Cards
   ====================================================================== */

.collection-cards-wrapper--theme-bc25 .collection-card {
    background: #F9F9F9;
    border-radius: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (min-width: 769px) {
    .collection-cards-wrapper--theme-bc25 .collection-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
    }
}

/**
 * Hover effect for desktop
 * Subtle lift and shadow increase
 */
@media (min-width: 769px) {
    .collection-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    }
}

/**
 * Focus state for keyboard navigation (accessibility)
 */
.collection-card:focus {
    outline: 2px solid #0066cc;
    outline-offset: 2px;
}

/* ==========================================================================
   Card Image Container
   ========================================================================== */

/**
 * Image wrapper with aspect ratio preservation
 * Uses padding-bottom trick for responsive aspect ratio
 */
.collection-card__image {
    position: relative;
    width: 100%;
    padding-bottom: 75%; /* Default 4:3 ratio */
    overflow: hidden;
    background: #f5f5f5;
}

.collection-cards-wrapper--theme-bc25 .collection-card__image {
    background: #F9F9F9;
    transition: background 0.4s ease;
}


.collection-cards-wrapper--theme-bc25 .collection-card__image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 45%, #7E7E7C 15%, #5a5d5e 45%, #474B4C 75%);
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
    z-index: 1;
}

.collection-cards-wrapper--theme-bc25 .collection-card:hover .collection-card__image::after {
    opacity: 1;
}

/**
 * Actual image element
 * Object-fit ensures proper scaling without distortion
 */
.collection-card__image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.collection-cards-wrapper--theme-bc25 .collection-card__image img {
    object-fit: contain;
    object-position: center center;
    transform: scale(0.88);
    transition: transform 0.4s ease;
    z-index: 2;
}

.collection-cards-wrapper--theme-bc25 .collection-card:hover .collection-card__image img {
    transform: scale(0.92);
}

/**
 * Gradient fallback when no image is available
 * Monochrome multi-point gradient for watch soldier photos
 * Maintains portrait ratio for soldier/watch display
 */
.collection-card__image--no-image {
    background: linear-gradient(
        135deg,
        #2c3e50 0%,
        #34495e 25%,
        #4a5f7f 50%,
        #5d6d7e 75%,
        #7f8c8d 100%
    );
}

/**
 * Alternative gradient variations (can be applied via template)
 */
.collection-card__image--gradient-warm {
    background: linear-gradient(
        135deg,
        #8b7355 0%,
        #a0826d 25%,
        #b8956a 50%,
        #c9a876 75%,
        #d4b896 100%
    );
}

.collection-card__image--gradient-cool {
    background: linear-gradient(
        135deg,
        #4a5568 0%,
        #5a6c7d 25%,
        #6b7f95 50%,
        #7d92a8 75%,
        #90a4ae 100%
    );
}

/* ==========================================================================
   Card Content Area
   ========================================================================== */

/**
 * Content container below image
 * Contains title and description
 */
.collection-card__content {
    padding: 20px;
    background: #fff;
}

.collection-cards-wrapper--theme-bc25 .collection-card__content {
    background: #F9F9F9;
    padding: 24px 20px 28px;
}

.collection-cards-wrapper--theme-bc25 .collection-card__content--overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 22px;
    padding: 0;
    background: transparent;
    display: flex;
    justify-content: center;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.35s ease, transform 0.35s ease;
    pointer-events: none;
    z-index: 2;
}

.collection-cards-wrapper--theme-bc25 .collection-card:hover .collection-card__content--overlay {
    opacity: 1;
    transform: translateY(0);
}

.collection-cards-wrapper--theme-bc25 .collection-card__content--overlay .collection-card__title {
    margin: 0;
    padding: 14px 18px;
    border: 1px solid transparent;
    border-radius: 12px;
    color: #484C4D;
    background: rgba(249, 249, 249, 0.18);
    text-align: center;
    max-width: calc(100% - 56px);
    transition: border-color 0.45s cubic-bezier(0.22, 0.61, 0.36, 1), background-color 0.45s cubic-bezier(0.22, 0.61, 0.36, 1), color 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.collection-cards-wrapper--theme-bc25 .collection-card:hover .collection-card__content--overlay .collection-card__title {
    border-color: rgba(249, 248, 246, 0.65);
    color: #F9F8F6;
    background-color: rgba(0, 0, 0, 0.06);
}

/**
 * Card title
 * Truncates with ellipsis if too long
 * Fixed height to prevent layout shift on hover
 */
body h3.collection-card__title {
	margin: 0 0 8px 0;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	color: #1a1a1a;
	min-height: 3.25em;
	max-height: 4.25em;
	overflow: hidden;
	text-overflow: ellipsis;
	display: flex;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	text-align: center;
	flex-direction: column;
}

.collection-cards-wrapper--theme-bc25 h3.collection-card__title {
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    color: #484C4D;
    min-height: auto;
    max-height: none;
    line-height: 1.4;
}

/**
 * Title prefix and suffix - hidden by default, visible on hover
 * "Discover the" and "collection" appear only on rollover
 * Uses visibility and opacity for smooth transitions
 */
.collection-card__title-prefix,
.collection-card__title-suffix {
    visibility: hidden;
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateY(-4px);
	display: inline-block;
}

.collection-cards-wrapper--theme-bc25 .collection-card__title-prefix,
.collection-cards-wrapper--theme-bc25 .collection-card__title-suffix {
    display: none;
}

.collection-card__title-prefix {
    font-weight: 400;
    color: #666;
    margin-right: 0.25em;
	display: inline-block;
}


.collection-card__title-suffix {
    font-weight: 400;
    color: #666;
    margin-left: 0.25em;
	display: inline-block;
}


.dht1230_product-template-default .collection-title-h3 {
	color: var( --e-global-color-primary );
	font-family: var( --e-global-typography-secondary-font-family ), Sans-serif;
	font-size: var( --e-global-typography-secondary-font-size );
	font-weight: var( --e-global-typography-secondary-font-weight );
	text-transform: var( --e-global-typography-secondary-text-transform );
	letter-spacing: var( --e-global-typography-secondary-letter-spacing );
	text-align: center;
	display: inline-flex;
	justify-content: center;
	align-content: center;
	align-items: center;
	margin: 0 auto;
	
  font-size: var( --e-global-typography-secondary-font-size );
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
}



/* Pages collections custom design */
.reference-cards-title-collection-label,
.reference-cards-title-subcollection-label,
.dht1230_subcol-template-default .collection-title h1,
.dht1230_collection-template-default .collection-title h1 {
  font-size: clamp(4.5vw, 4.5vw, 52px);
  font-weight: 700;
  line-height: 1.2;
  margin:0;
  padding:0;
  text-transform: uppercase;
}

.dht1230_subcol-template-default .collection-description h2,
.dht1230_collection-template-default .collection-description h2 {
  font-size: clamp(4.5vw, 4.5vw, 52px);
  font-weight: 100;
  line-height: 1.2;
  margin:0;
  padding:0;
  text-transform: uppercase;
}
.dht1230_subcol-template-default .collection-text .dht1230-description,
.dht1230_collection-template-default .collection-text .dht1230-description {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-content: center;
	align-self: center;
	margin: 0 auto;
	color: var( --e-global-color-primary );
}

/**
 * Show prefix and suffix on hover with smooth transition
 * Also adjust title to show 3 lines when expanded
 */
.collection-card:hover .collection-card__title-prefix,
.collection-card:hover .collection-card__title-suffix {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

/**
 * Adjust title display on hover to accommodate prefix/suffix
 * Smooth transition from 2 to 3 lines
 */
.collection-card:hover .collection-card__title {
    -webkit-line-clamp: 3;
    line-clamp: 3;
    color: #1a1a1a; /* Ensure color remains consistent */
}

/**
 * Card description
 * Limited to 3 lines with ellipsis
 */
.collection-card__description {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.5;
    color: #666;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
}

/* ==========================================================================
   Mobile Layout - Responsive Breakpoint
   ========================================================================== */

/**
 * Mobile breakpoint (≤ 768px)
 * Switches from grid to carousel or scrollable grid
 */
@media (max-width: 768px) {
    
    /**
     * Carousel wrapper with indicators
     */
    .collection-cards-wrapper--carousel {
        position: relative;
        padding-bottom: 40px;
    }
    
    /**
     * Carousel layout (default mobile)
     * Horizontal scrolling with snap points
     * Adjusted padding to show peek of next/prev cards
     */
    .collection-cards-wrapper--carousel .collection-cards-container {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 16px;
        padding: 0 7.5vw;
        -webkit-overflow-scrolling: touch; /* Smooth scroll on iOS */
        scrollbar-width: none; /* Hide scrollbar Firefox */
        -ms-overflow-style: none; /* Hide scrollbar IE/Edge */
    }
    
    /**
     * Hide scrollbar for Webkit browsers
     */
    .collection-cards-wrapper--carousel .collection-cards-container::-webkit-scrollbar {
        display: none;
    }
    
    /**
     * Individual card in carousel
     * Takes 85% of viewport width
     * Snaps to center when scrolling
     */
    .collection-cards-wrapper--carousel .collection-card {
        flex: 0 0 85vw;
        max-width: 85vw;
        scroll-snap-align: center;
    }
    
    /**
     * Carousel indicators container
     */
    .carousel-indicators {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
        margin-top: 20px;
        padding: 0 20px;
    }
    
    /**
     * Individual indicator dot
     */
    body button.carousel-indicator {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #b0a79f;
        transition: all 0.3s ease;
        cursor: pointer;
        /* Reset button styles */
        border: none;
        padding: 0;
        margin: 0;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
    }
    
    /**
     * Active indicator
     */
    body button.carousel-indicator.active {
        background: #363a3b;
        width: 10px;
        border-radius: 50%;
    }
    
    /**
     * Indicator hover state
     */
    body button.carousel-indicator:hover {
        background: #4a4a4a;
    }
    body button.carousel-indicator:focus {
        background: #4a4a4a;
    }
    
    /**
     * Grid scrollable layout (alternative mobile)
     * CSS Grid with horizontal auto-flow
     */
    .collection-cards-wrapper--grid .collection-cards-container {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 85%;
        overflow-x: auto;
        gap: 16px;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    
    /**
     * Hide scrollbar for grid layout
     */
    .collection-cards-wrapper--grid .collection-cards-container::-webkit-scrollbar {
        display: none;
    }
    
    /**
     * Card in grid scrollable
     */
    .collection-cards-wrapper--grid .collection-card {
        scroll-snap-align: center;
    }
    
    /**
     * Adjust card content padding for mobile
     */
    .collection-card__content {
        padding: 16px;
    }
    
    /**
     * Reduce title size on mobile
     */
    .collection-card__title {
        font-size: 1.1rem;
    }
    
    /**
     * Reduce description size on mobile
     */
    .collection-card__description {
        font-size: 0.9rem;
    }
}

/* ==========================================================================
   Tablet Layout - Medium Screens
   ========================================================================== */

/**
 * Tablet breakpoint (769px - 1024px)
 * 3 columns for better spacing on medium screens
 */
@media (min-width: 769px) and (max-width: 1024px) {
    .collection-cards-container {
        grid-template-columns: repeat(3, 1fr);
    }
    .collection-cards-wrapper--theme-bc25 .collection-card__image {
        min-height: 390px;
    }
}

/* ==========================================================================
   Large Desktop - Extra Wide Screens
   ========================================================================== */

/**
 * Large screens (> 1400px)
 * Maintain 3 columns but with larger gap
 */
@media (min-width: 1400px) {
    .collection-cards-container {
        gap: 32px;
    }
}

/* ==========================================================================
   Accessibility Enhancements
   ========================================================================== */

/**
 * Reduce motion for users with motion sensitivity
 */
@media (prefers-reduced-motion: reduce) {
    .collection-card {
        transition: none;
    }
    
    .collection-card:hover {
        transform: none;
    }
}

/**
 * High contrast mode support
 */
@media (prefers-contrast: high) {
    .collection-card {
        border: 2px solid currentColor;
    }
    
    .collection-card:focus {
        outline-width: 3px;
    }
}

/* ==========================================================================
   Loading State (Optional)
   ========================================================================== */

/**
 * Skeleton loading state for cards
 * Can be applied while content loads
 */
.collection-card--loading .collection-card__image {
    background: linear-gradient(
        90deg,
        #f0f0f0 25%,
        #e0e0e0 50%,
        #f0f0f0 75%
    );
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

@keyframes loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

.collection-card--loading .collection-card__title,
.collection-card--loading .collection-card__description {
    background: #f0f0f0;
    color: transparent;
    border-radius: 4px;
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

/**
 * Print-friendly layout
 * Removes shadows and adjusts for paper
 */
@media print {
    .collection-cards-container {
        display: block;
    }
    
    .collection-card {
        page-break-inside: avoid;
        box-shadow: none;
        border: 1px solid #ddd;
        margin-bottom: 20px;
    }
    
    .collection-card:hover {
        transform: none;
        box-shadow: none;
    }
}

/* ==========================================================================
   SUBCOLLECTION CARDS - Same styles as collection cards
   ========================================================================== */

/**
 * Subcollection cards wrapper
 * Uses same responsive system as collection cards
 */
.subcollection-cards-wrapper {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/**
 * Desktop grid for subcollections
 */
.subcollection-cards-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    width: 100%;
    box-sizing: border-box;
}

/**
 * Individual subcollection card
 */
.subcollection-card {
    position: relative;
    display: block;
    text-decoration: none;
    color: inherit;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

@media (min-width: 769px) {
    .subcollection-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    }
}

.subcollection-card:focus {
    outline: 2px solid #0066cc;
    outline-offset: 2px;
}

/**
 * Subcollection card image
 */
.subcollection-card__image {
    position: relative;
    width: 100%;
    padding-bottom: 75%;
    overflow: hidden;
    background: #f5f5f5;
}

.subcollection-card__image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.subcollection-card__image--no-image {
    background: linear-gradient(
        135deg,
        #34495e 0%,
        #4a5f7f 25%,
        #5d6d7e 50%,
        #7f8c8d 75%,
        #95a5a6 100%
    );
}

/**
 * Subcollection card content
 */
.subcollection-card__content {
    padding: 20px;
    background: #fff;
}

/**
 * Subcollection card title with hover effects
 */
body h3.subcollection-card__title {
    margin: 0 0 8px 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    color: #1a1a1a;
    min-height: 3.25em;
    max-height: 4.25em;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: center;
    flex-direction: column;
}

.subcollection-card__title-prefix,
.subcollection-card__title-suffix {
    visibility: hidden;
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateY(-4px);
    display: inline-block;
}

.subcollection-card__title-prefix {
    font-weight: 400;
    color: #666;
    margin-right: 0.25em;
    display: inline-block;
}

.subcollection-card__title-suffix {
    font-weight: 400;
    color: #666;
    margin-left: 0.25em;
    display: inline-block;
}

.subcollection-card:hover .subcollection-card__title-prefix,
.subcollection-card:hover .subcollection-card__title-suffix {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

.subcollection-card:hover .subcollection-card__title {
    -webkit-line-clamp: 3;
    line-clamp: 3;
}

.subcollection-card__description {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.5;
    color: #666;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
}

/**
 * Mobile layout for subcollections
 */
@media (max-width: 768px) {
    .subcollection-cards-wrapper--carousel {
        position: relative;
        padding-bottom: 40px;
    }
    
    .subcollection-cards-wrapper--carousel .subcollection-cards-container {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 16px;
        padding: 0 7.5vw;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    
    .subcollection-cards-wrapper--carousel .subcollection-cards-container::-webkit-scrollbar {
        display: none;
    }
    
    .subcollection-cards-wrapper--carousel .subcollection-card {
        flex: 0 0 85vw;
        max-width: 85vw;
        scroll-snap-align: center;
    }
    
    .subcollection-cards-wrapper--grid .subcollection-cards-container {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 85%;
        overflow-x: auto;
        gap: 16px;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    
    .subcollection-cards-wrapper--grid .subcollection-cards-container::-webkit-scrollbar {
        display: none;
    }
    
    .subcollection-card__content {
        padding: 16px;
    }
    
    .subcollection-card__title {
        font-size: 1.1rem;
    }
    
    .subcollection-card__description {
        font-size: 0.9rem;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .subcollection-cards-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ==========================================================================
   REFERENCE CARDS (Products) - Same styles as collection cards
   ========================================================================== */

/**
 * Reference cards wrapper
 */
.reference-cards-wrapper {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/**
 * Desktop grid for references
 */
.reference-cards-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    width: 100%;
    box-sizing: border-box;
}

/**
 * Individual reference card
 */
.reference-card {
    position: relative;
    display: block;
    text-decoration: none;
    color: inherit;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* ======================================================================
   Theme BC25 - Reference Cards
   ====================================================================== */

.reference-cards-wrapper--theme-bc25 .reference-card {
    background: #F9F9F9;
    border-radius: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (min-width: 769px) {
    .reference-cards-wrapper--theme-bc25 .reference-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
    }
}

@media (min-width: 769px) {
    .reference-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    }
}

.reference-card:focus {
    outline: 2px solid #0066cc;
    outline-offset: 2px;
}

/**
 * Reference card image
 */
.reference-card__image {
    position: relative;
    width: 100%;
    padding-bottom: 75%;
    overflow: hidden;
    background: #f5f5f5;
}

.reference-cards-wrapper--theme-bc25 .reference-card__image {
    background: #F9F9F9;
    transition: background 0.4s ease;
}

.reference-cards-wrapper--theme-bc25 .reference-card:hover .reference-card__image {
    background: radial-gradient(ellipse at 50% 45%, #7E7E7C 15%, #5a5d5e 45%, #474B4C 75%);
}

.reference-cards-wrapper--theme-bc25 .reference-card__image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 45%, #7E7E7C 15%, #5a5d5e 45%, #474B4C 75%);
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
    z-index: 1;
}

.reference-cards-wrapper--theme-bc25 .reference-card:hover .reference-card__image::after {
    opacity: 1;
}

.reference-card__image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.reference-cards-wrapper--theme-bc25 .reference-card__image img {
    object-fit: contain;
    object-position: center center;
    transform: scale(0.88);
    transition: transform 0.4s ease;
    z-index: 2;
}

.reference-cards-wrapper--theme-bc25 .reference-card:hover .reference-card__image img {
    transform: scale(0.92);
}

.reference-card__image--no-image {
    background: linear-gradient(
        135deg,
        #5d4e37 0%,
        #8b7355 25%,
        #a0826d 50%,
        #b8956a 75%,
        #d4b896 100%
    );
}

/**
 * Reference card content
 */
.reference-card__content {
    padding: 20px;
    background: #fff;
}

.reference-cards-wrapper--theme-bc25 .reference-card__content {
    background: #F9F9F9;
    padding: 24px 20px 28px;
}

.reference-cards-wrapper--theme-bc25 .reference-card__content--overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 22px;
    padding: 0;
    background: transparent;
    display: flex;
    justify-content: center;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.35s ease, transform 0.35s ease;
    pointer-events: none;
    z-index: 2;
}

.reference-cards-wrapper--theme-bc25 .reference-card:hover .reference-card__content--overlay {
    opacity: 1;
    transform: translateY(0);
}

.reference-cards-wrapper--theme-bc25 .reference-card__content--overlay .reference-card__title {
    margin: 0;
    padding: 14px 18px;
    border: 1px solid transparent;
    border-radius: 12px;
    color: #484C4D;
    background: rgba(249, 249, 249, 0.18);
    text-align: center;
    max-width: calc(100% - 56px);
    transition: border-color 0.45s cubic-bezier(0.22, 0.61, 0.36, 1), background-color 0.45s cubic-bezier(0.22, 0.61, 0.36, 1), color 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.reference-cards-wrapper--theme-bc25 .reference-card:hover .reference-card__content--overlay .reference-card__title {
    border-color: rgba(249, 248, 246, 0.65);
    color: #F9F8F6;
    background-color: rgba(0, 0, 0, 0.06);
}

/**
 * Reference card title with hover effects
 */
body h3.reference-card__title {
    margin: 0 0 8px 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    color: #1a1a1a;
    min-height: 3.25em;
    max-height: 4.25em;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: center;
    flex-direction: column;
}

.reference-cards-wrapper--theme-bc25 h3.reference-card__title {
    font-size: 12px;
    font-weight: 100;
    text-transform: uppercase;
    color: #484C4D;
    min-height: auto;
    max-height: none;
    line-height: 16px;
}

.reference-card__title-prefix,
.reference-card__title-suffix {
    visibility: hidden;
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateY(-4px);
    display: inline-block;
}

.reference-cards-wrapper--theme-bc25 .reference-card__title-prefix,
.reference-cards-wrapper--theme-bc25 .reference-card__title-suffix {
    display: none;
}

.reference-card__title-prefix {
    font-weight: 400;
    color: #666;
    margin-right: 0.25em;
    display: inline-block;
}

.reference-card__title-suffix {
    font-weight: 400;
    color: #666;
    margin-left: 0.25em;
    display: inline-block;
}

.reference-card:hover .reference-card__title-prefix,
.reference-card:hover .reference-card__title-suffix {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

.reference-card:hover .reference-card__title {
    -webkit-line-clamp: 3;
    line-clamp: 3;
}

/**
 * Reference card meta information (reference, collection, price)
 */
.reference-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
    justify-content: center;
    align-items: center;
}

.reference-cards-wrapper--theme-bc25 .reference-card__meta {
    gap: 0;
    margin-top: 0;
}

.reference-card__reference,
.reference-card__collection,
.reference-card__prix {
    display: inline-block;
    font-size: 0.85rem;
    padding: 2px 8px;
    border-radius: 4px;
    background: #f8f9fa;
    color: #666;
    font-weight: 500;
    line-height: 1.2;
}

.reference-cards-wrapper--theme-bc25 .reference-card__reference,
.reference-cards-wrapper--theme-bc25 .reference-card__collection,
.reference-cards-wrapper--theme-bc25 .reference-card__prix {
    font-size:  16px;
    padding: 0;
    background: rgba(249, 249, 249, 0.8);
    color: #484C4D;
    border-radius: 3px;
    font-weight: 600;
    text-transform: uppercase;
}

.reference-cards-wrapper--theme-bc25 .reference-card__collection {
    margin:10px 0;
}
.reference-cards-wrapper--theme-bc25 .reference-card__prix {
    display: inline-block;
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 4px;
    background: #f8f9fa;
    color: #666;
    font-weight: 100;
    line-height: 16px;
}


.reference-card__reference {
    background: #e8f4f8;
    color: #0277bd;
}

.reference-cards-wrapper--theme-bc25 .reference-card__reference {
    background: rgba(232, 244, 248, 0.9);
    color: #0277bd;
}

.reference-card__collection {
    background: transparent;
}

.reference-cards-wrapper--theme-bc25 .reference-card__collection {
    background: transparent;
}

.reference-card__prix {
    background: transparent;
}

.reference-cards-wrapper--theme-bc25 .reference-card__prix {
    background: transparent;
}

/* Hover effects for meta items */
@media (min-width: 769px) {
    .reference-cards-wrapper--theme-bc25 .reference-card:hover .reference-card__reference,
    .reference-cards-wrapper--theme-bc25 .reference-card:hover .reference-card__collection,
    .reference-cards-wrapper--theme-bc25 .reference-card:hover .reference-card__prix {
        background: transparent;
        color: #F9F8F6;
        transform: translateY(-1px);
        transition: all 0.3s ease;
    }
}

/**
 * Mobile layout for references
 */
@media (max-width: 768px) {
    .reference-cards-wrapper--carousel {
        position: relative;
        padding-bottom: 0;
    }
    
    .reference-cards-wrapper--carousel .reference-cards-container {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 16px;
        padding: 0 7.5vw;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    
    .reference-cards-wrapper--carousel .reference-cards-container::-webkit-scrollbar {
        display: none;
    }
    
    .reference-cards-wrapper--carousel .reference-card {
        flex: 0 0 85vw;
        max-width: 85vw;
        scroll-snap-align: center;
    }
    
    .reference-cards-wrapper--grid .reference-cards-container {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 85%;
        overflow-x: auto;
        gap: 16px;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    
    .reference-cards-wrapper--grid .reference-cards-container::-webkit-scrollbar {
        display: none;
    }
    
    .reference-card__content {
        padding: 16px;
    }
    
    .reference-card__title {
        font-size: 1.1rem;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .reference-cards-container {
        grid-template-columns: repeat(3, 1fr);
    }
    .reference-card__image {
        min-height: 400px;
    }
}

/**
 * Section titles for grouped references
 */
.reference-cards-section {
    margin-bottom: 30px; margin-top: 60px;
}

.reference-cards-title-collection {
    font-size: clamp(30px, 45px, 52px);
    font-weight: bold;
    margin: 0 0 30px 0;
    color: #1a1a1a;
}

.reference-cards-title-subcollection {
    margin: 0 0 60px 0;
    color: #2c3e50;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    width: 100%;
    align-items: center;
}
.reference-cards-title-collection-label {
    font-weight: bold;
}
.reference-cards-title-subcollection-label {
    font-weight: 100;
}

.reference-cards-subcollection-description {
    text-align: left;
    max-width: 700px;
    margin: 0 auto 30px auto;
    color: #2c3e50;
}

/**
 * Accessibility and print styles for subcollections and references
 */
@media (prefers-reduced-motion: reduce) {
    .subcollection-card,
    .reference-card {
        transition: none;
    }
    
    .subcollection-card:hover,
    .reference-card:hover {
        transform: none;
    }
}

@media print {
    .subcollection-cards-container,
    .reference-cards-container {
        display: block;
    }
    
    .subcollection-card,
    .reference-card {
        page-break-inside: avoid;
        box-shadow: none;
        border: 1px solid #ddd;
        margin-bottom: 20px;
    }
}

@media (max-width: 768px) {
    body h3.reference-cards-title-subcollection {
        margin: 30px auto 60px auto;
        text-align: center;
    }
    body .reference-cover__column.reference-cover__column--title {
        width: 100%;
        padding: 0 0 0 0;
        display: flex;
        flex-direction: column;
        align-content: center;
        justify-content: center;
        align-items: center;
        text-align: center;
        position: relative;
        top: 65px;
    }
    .dht1230_product-template-default .collection-title-h3 {
        padding: 0 15px;
    }
}


/* New feature Backlight */

.collection-cards-wrapper--theme-bc25 img.collection-card__backlight,
.collection-cards-wrapper--theme-bc25 img.subcollection-card__backlight,
.reference-cards-wrapper--theme-bc25 img.reference-card__backlight{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center center;
    opacity: 0.3;
    transition: opacity 0.4s ease, transform 0.4s ease;
    pointer-events: none;
    z-index: 1;
    transform: scale(0.88);
}

.collection-cards-wrapper--theme-bc25 .collection-card:hover .collection-card__backlight,
.subcollection-cards-wrapper--theme-bc25 .subcollection-card:hover .subcollection-card__backlight,
.reference-cards-wrapper--theme-bc25 .reference-card:hover .reference-card__backlight {
    opacity: 1;
    transform: scale(0.92);
}

.e-off-canvas__content .collection-cards-wrapper--theme-bc25 .collection-card__content--overlay .collection-card__title {
		color: #FFFFFFD6;
}



@media (min-width: 1024px) {
    .dht1230_subcol-template-default .collection-description h2, .dht1230_collection-template-default .collection-description h2,
    .reference-cards-title-collection-label, .reference-cards-title-subcollection-label, .dht1230_subcol-template-default .collection-title h1, .dht1230_collection-template-default .collection-title h1 {
        font-size: 52px;
    }
}


@media (max-width: 768px) {
    .reference-cards-section {
        padding: 30px 30px;
        margin: 0;
        background: radial-gradient(ellipse at top left, var(--e-global-color-4fe87a8, #F8F7F5) 0%, var(--e-global-color-a0fa4c2, #D9D2CC) 100%);
    }
    
    .dht1230_product-template-default .collection-title-h3 ,
    .dht1230_subcol-template-default .collection-description h2, .dht1230_collection-template-default .collection-description h2,
    .reference-cards-title-collection-label, .reference-cards-title-subcollection-label, .dht1230_subcol-template-default .collection-title h1, .dht1230_collection-template-default .collection-title h1{
            font-size: 8vw;
    }
    .carousel-indicators { display:none;}
    .home .carousel-indicators { display:flex;}
    
}

/* ==========================================================================
   PATCH FLEXBOX - Centrage des éléments (2 sur 3 colonnes)
   Date: 19.03.2026
   Permet de centrer les cartes quand il y a 2 éléments sur une ligne de 3 colonnes
   Commentez cette section pour revenir au layout grid original
   ========================================================================== */

.reference-cards-container {
  display: flex;
  flex-wrap: wrap; /* Permet le retour à la ligne */
  gap: 20px; /* Espacement entre les éléments */
  width: 100%;
  box-sizing: border-box;
  justify-content: center; /* Centre les éléments horizontalement */
}

body .reference-cards-wrapper--theme-bc25 .reference-card {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
  flex: 0 0 calc(33.333% - 20px); /* 3 éléments par ligne (ajuste la largeur en fonction du gap) */
  max-width: calc(33.333% - 20px); /* Limite la largeur max */
}

/* Adaptation pour 2 éléments par ligne si nécessaire */
@media (max-width: 900px) { /* Ajuste cette valeur selon ton design */
  body .reference-cards-wrapper--theme-bc25 .reference-card {
    flex: 0 0 calc(50% - 20px); /* 2 éléments par ligne */
    max-width: calc(50% - 20px);
  }
}

/* Adaptation pour 1 élément par ligne sur mobile */
@media (max-width: 600px) { /* Ajuste cette valeur selon ton design */
  body .reference-cards-wrapper--theme-bc25 .reference-card {
    flex: 0 0 100%; /* 1 élément par ligne */
    max-width: 100%;
  }
}