/* --- Product Spotlight Card --- */
.product-spotlight-card {
    padding: 2rem; /* Equivalent to p-8 */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); /* Equivalent to shadow-lg */
    border: 0; /* Equivalent to border-0 */
    background-color: #fff; /* Equivalent to bg-white */
    border-radius: 0.5rem; /* Equivalent to Card rounded-lg */
}

/* --- Eyebrow Capsule Tag --- */
.product-spotlight-eyebrow {
    margin-bottom: 1rem; /* Equivalent to mb-4 */
}

.eyebrow-capsule {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.75rem; /* Equivalent to px-3 py-1.5 */
    background-color: rgba(0, 94, 184, 0.1); /* Equivalent to bg-daikin-blue/10 */
    border-radius: 9999px; /* Equivalent to rounded-full */
    border: 1px solid rgba(0, 94, 184, 0.2); /* Equivalent to border border-daikin-blue/20 */
}

.eyebrow-text {
    font-size: 0.75rem; /* Equivalent to text-xs */
    font-weight: 600; /* Equivalent to font-semibold */
    color: #005EB8; /* Equivalent to text-daikin-blue */
}

/* --- Product Spotlight Grid (Text & Slider) --- */
.product-spotlight-grid {
    display: grid;
    grid-template-columns: 1fr; /* Default to single column */
    gap: 3rem; /* Equivalent to gap-12 */
    align-items: center; /* Equivalent to items-center */
}

@media (min-width: 1024px) { /* lg breakpoint */
    .product-spotlight-grid {
        grid-template-columns: repeat(2, 1fr); /* Equivalent to lg:grid-cols-2 */
    }
}

/* --- Left Column: Text Content --- */
.product-text-content {
    /* space-y-6 */
}

    .product-text-content > *:not(:last-child) {
        margin-bottom: 1.5rem; /* Equivalent to space-y-6 (6 * 0.25rem = 1.5rem) */
    }

.product-title {
    font-size: 1.875rem; /* Equivalent to text-3xl */
    font-weight: 700; /* Equivalent to font-bold */
    color: #1f2937; /* Equivalent to text-gray-800 */
}

.product-description {
    color: #4b5563; /* Equivalent to text-gray-600 */
    line-height: 1.625; /* Equivalent to leading-relaxed */
    font-size: 0.875rem; /* Equivalent to text-sm */
}

/* --- Right Column: Product Image Slider --- */
.product-image-slider-area {
    position: relative;
}

.image-slider-frame {
    position: relative;
    overflow: hidden;
    border-radius: 0.5rem; /* Equivalent to rounded-lg */
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); /* Equivalent to shadow-2xl */
    height: 24rem; /* Set a fixed height for the slider frame */
}

/* Wrapper for all slides to stack them */
.image-slides-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

.slider-image {
    position: absolute; /* Stack images on top of each other */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Equivalent to object-cover */
    opacity: 0; /* Hidden by default */
    transition: opacity 0.3s ease-in-out; /* Smooth fade transition */
}

    .slider-image.active {
        opacity: 1; /* Show active image */
    }

/* Slider Controls (Prev/Next buttons) */
.slider-control {
    position: absolute;
    top: 50%;
    transform: translateY(-50%); /* Equivalent to transform -translate-y-1/2 */
    background-color: rgba(255, 255, 255, 0.2); /* Equivalent to bg-white/20 */
    backdrop-filter: blur(4px); /* Equivalent to backdrop-blur-sm */
    border-radius: 9999px; /* Equivalent to rounded-full */
    padding: 0.5rem; /* Equivalent to p-2 */
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out; /* Equivalent to transition-colors */
    z-index: 1; /* Ensure controls are above images */
}

    .slider-control:hover {
        background-color: rgba(255, 255, 255, 0.3); /* Equivalent to hover:bg-white/30 */
    }

.slider-control-left {
    left: 1rem; /* Equivalent to left-4 */
}

.slider-control-right {
    right: 1rem; /* Equivalent to right-4 */
}

.chevron-icon {
    height: 1.5rem; /* Equivalent to h-6 */
    width: 1.5rem; /* Equivalent to w-6 */
    color: #fff; /* Equivalent to text-white */
    stroke: currentColor;
}

/* Slide Indicators */
.slide-indicators {
    position: absolute;
    bottom: 1rem; /* Equivalent to bottom-4 */
    left: 50%;
    transform: translateX(-50%); /* Equivalent to transform -translate-x-1/2 */
    display: flex;
    gap: 0.5rem; /* Equivalent to space-x-2 */
    z-index: 1; /* Ensure indicators are above images */
}

.indicator-dot {
    width: 0.5rem; /* Equivalent to w-2 */
    height: 0.5rem; /* Equivalent to h-2 */
    border-radius: 9999px; /* Equivalent to rounded-full */
    background-color: rgba(255, 255, 255, 0.4); /* Default: bg-white/40 */
    transition: background-color 0.2s ease-in-out; /* transition-colors */
    border: none;
    cursor: pointer;
}

    .indicator-dot.active {
        background-color: #fff; /* Active: bg-white */
    }