/* HOME PAGE SPECIFIC STYLES */

/* Product Card Animations */
.product-card {
    border: 1px solid #e5e7eb;               /* consistent light gray border */
    border-radius: 15px;                      /* match .card radius */
    background: #fff;
    overflow: hidden;                         /* clip inner image to radius */
    transition: transform 250ms ease, box-shadow 250ms ease, border-color 250ms ease;
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
    border-color: rgba(0, 123, 255, 0.35);    /* keep width, just change color */
}

/* Unified product image sizing across cards */
.product-card .product-image-container { height: 220px !important; }
@media (min-width: 576px) { .product-card .product-image-container { height: 240px !important; } }
@media (min-width: 992px) { .product-card .product-image-container { height: 260px !important; } }
.product-card .product-image-container img.card-img-top,
.product-card .product-image-container .product-img {
    width: 100%;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block;
}

/* Final override: fixed uniform height for product images */
.product-card .product-image-container { height: 280px !important; }
.product-card .product-image-container .product-img,
.product-card .product-image-container .card-img-top {
    height: 280px !important;
    object-fit: cover !important;
    object-position: center center !important;
}

/* Category Card Animations */
.category-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(40, 167, 69, 0.1);
    border-color: #28a745;
}

/* Feature Box Animations */
.feature-box:hover .feature-icon i {
    transform: scale(1.1);
    transition: transform 0.3s ease;
}

/* Product Image Container */
.product-image-container { position: relative; overflow: hidden; }

/* Hero Section Styling */
.hero-section { position: relative; overflow: hidden; }

.hero-section::before {
    content: '';
    position: absolute; inset: 0;
    background: repeating-linear-gradient(45deg, rgba(255,255,255,0.02) 0px, rgba(255,255,255,0.02) 2px, transparent 2px, transparent 4px);
    opacity: 0.3;
}

.text-light { opacity: 0.9; }

/* Hero Image Container */
.hero-image-container { position: relative; cursor: pointer; }

.hero-image-container img {
    will-change: transform;
    backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    transition: transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
    transform-origin: center;
    animation: hero-drift 10s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate;
}

/* Hover pop-up effect (desktop hover devices) */
@media (hover: hover) and (pointer: fine) {
    .hero-image-container:hover img {
        transform: translate3d(0, -14px, 0) scale(1.05);
        box-shadow: 0 26px 52px rgba(0, 0, 0, 0.28);
        animation-play-state: paused;
    }
    .hero-image-container:hover::before { opacity: 1; transform: scale(1.02); }
}

/* Additional glow effect */
.hero-image-container::before {
    content: '';
    position: absolute; top: -5px; left: -5px; right: -5px; bottom: -5px;
    background: linear-gradient(45deg, rgba(0, 123, 255, 0.18), rgba(40, 167, 69, 0.18));
    border-radius: 15px;
    z-index: -1;
    opacity: 0;
    transition: opacity 220ms ease-out, transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

/* Active state (when clicked) */
.hero-image-container:active img {
    transform: translate3d(0, -6px, 0) scale(1.02);
    transition-duration: 120ms;
}

/* Brand section tweaks - Home page only */
.brand-showcase .brand-logo-container { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; border-radius: 0 !important; }

/* Subtle drift keyframes for hero image */
@keyframes hero-drift {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    25%  { transform: translate3d(0, -3px, 0) scale(1.003); }
    50%  { transform: translate3d(0, -5px, 0) scale(1.006); }
    75%  { transform: translate3d(0, -3px, 0) scale(1.003); }
    100% { transform: translate3d(0, 0, 0) scale(1); }
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    .hero-image-container img { animation: none !important; transition: none !important; }
    .hero-image-container:hover img { transform: none; box-shadow: none; }
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .hero-image-container:hover img { transform: translate3d(0, -6px, 0) scale(1.02); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2); }
}

/* Hero pop image: shrink by default, grow on hover with shadow (hero only) */
.hero-pop {
    display: block;
    transform-origin: center;
    backface-visibility: hidden;
    will-change: transform, box-shadow;
    /* Default slightly smaller */
    transform: scale(0.965);
    box-shadow: 0 6px 16px rgba(0,0,0,0.12);
    /* Smooth motion */
    transition: transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1),
                box-shadow 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
    /* Disable drift animation to prevent transform conflicts */
    animation: none !important;
}

/* Desktop hover: trigger on img and also when hovering container padding */
@media (hover: hover) and (pointer: fine) {
    .hero-pop:hover,
    .hero-image-container:hover .hero-pop {
        transform: translate3d(0, -10px, 0) scale(1.045);
        box-shadow: 0 24px 48px rgba(0,0,0,0.28);
    }
}

/* Mobile/tablet: gentler effect */
@media (max-width: 768px) {
    .hero-pop { transform: scale(0.985); }
    .hero-pop:hover,
    .hero-image-container:hover .hero-pop {
        transform: translate3d(0, -6px, 0) scale(1.02);
        box-shadow: 0 12px 24px rgba(0,0,0,0.2);
    }
}

/* Horizontal scroll for Featured Products */
.featured-scroll {
    display: flex;
    flex-wrap: nowrap;              /* keep items on one line */
    overflow-x: auto;               /* horizontal scroll */
    overflow-y: hidden;             /* no vertical scroll */
    gap: 16px;
    padding: 4px 4px 8px;           /* breathing room for scrollbar */
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}
.featured-item {
    flex: 0 0 280px;                /* fixed card width */
    min-width: 280px;               /* enforce width for nowrap */
    scroll-snap-align: start;
}
/* Optional: show custom thin scrollbar on WebKit */
.featured-scroll::-webkit-scrollbar { height: 10px; }
.featured-scroll::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 8px; }
.featured-scroll::-webkit-scrollbar-thumb { background: #c7d2fe; border-radius: 8px; }
.featured-scroll::-webkit-scrollbar-thumb:hover { background: #a5b4fc; }

/* Restore: shift only the right button outward using translate, keep right anchored at 0 */
.featured-carousel .featured-next {
    right: 8px !important;
    transform: translateY(-50%) !important;
}
.featured-carousel .featured-next:hover {
    transform: translateY(-50%) scale(1.06) !important;
}

/* Ensure LEFT hover matches too (for consistency) */
.featured-carousel .featured-prev:hover {
    transform: translateY(-50%) scale(1.06) !important;
}

@media (max-width: 576px) {
    .featured-carousel .featured-next { transform: translate(12px, -50%) !important; }
    .featured-carousel .featured-next:hover { transform: translate(12px, -50%) scale(1.06) !important; }
}

/* Always show round carousel buttons and keep them above content */
.featured-carousel .carousel-btn {
    opacity: 1 !important;          /* visible on all devices */
    z-index: 10 !important;          /* above cards */
    border-radius: 50% !important;   /* ensure round */
    width: 40px; height: 40px;       /* consistent size */
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}

/* Featured carousel: 3-column grid per view and slight right indent */
.featured-carousel .featured-item {
    flex: 0 0 calc((100% - 32px) / 3) !important; /* 3 columns, 2 gaps */
    min-width: 300px;
}
@media (max-width: 992px) {
    .featured-carousel .featured-item { flex-basis: calc((100% - 16px) / 2) !important; }
}
@media (max-width: 576px) {
    .featured-carousel .featured-item { flex-basis: 85% !important; }
}

/* Slight right indent for the scroller */
.featured-carousel .featured-scroll { padding-left: 24px !important; }
.featured-carousel { position: relative; }
.featured-carousel .carousel-btn {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}
.featured-carousel .featured-prev { left: 8px !important; }
.featured-carousel .featured-next { right: 8px !important; transform: translateY(-50%) !important; }
.featured-carousel .featured-scroll {
    padding-left: 56px !important;
    padding-right: 56px !important;
    scroll-padding-left: 56px;  /* for better snap on supported browsers */
    scroll-padding-right: 56px;
}
/* Use gap only for spacing; remove margins if any */
.featured-carousel .featured-item { margin-right: 0 !important; }
/* Ensure all product cards are equal height and aligned */
.featured-item { display: flex; }
.featured-item .product-card { display: flex; flex-direction: column; width: 100%; }
.product-card .product-image-container { height: 280px !important; }
.product-card .card-body { flex: 1 1 auto; display: flex; flex-direction: column; }

/* Keep titles same height (up to 2 lines) */
.product-card .card-title {
    line-height: 1.25;
    max-height: calc(1.25em * 2);
    overflow: hidden;
    min-height: calc(1.25em * 2);
}

/* Clamp description to 3 lines for consistent body height */
.product-card .card-text.flex-grow-1 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 3.75em; /* ~3 lines at 1.25 line-height */
}

/* Normalize image rendering inside container */
.product-card .product-image-container .product-img,
.product-card .product-image-container .card-img-top {
    width: 100%;
    height: 100% !important;
    object-fit: cover !important;      /* fill entire frame, crop overflow */
    object-position: center center !important; /* center crop */
    background: none !important;
    padding: 0 !important;
}

/* Equal-height product grids */
.product-grid > [class*='col-'] { display: flex; }
.product-grid .product-card { display: flex; flex-direction: column; width: 100%; height: 100%; }
.product-card .card-body { display: flex; flex-direction: column; }
/* Clamp title to 2 lines for consistent height */
.product-card .card-title { line-height: 1.25; max-height: calc(1.25em * 2); min-height: calc(1.25em * 2); overflow: hidden; }
/* Single-line meta row (brand • category) */
.product-card .meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 1.25em; }

/* Specific fix: keep Harley image sharp (no aggressive crop) */
.product-card .product-image-container img[alt*='Harley-Davidson'] {
    object-fit: contain !important; /* retain full image */
    image-rendering: auto;          /* default rendering */
}}