/* ==========================================================================
   Home 8 Hero Section & Promotional Banners Custom Stylesheet
   ========================================================================== */

/* ── Container Width ─────────────────────────────────── */
@media (min-width: 1400px) {
    .container {
        max-width: 1660px !important;
    }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
    .container {
        max-width: 1380px !important;
    }
}

.home8-wrapper {
    color: #111;
    font-family: inherit;
    width: 100%;
}

/* ── Section spacing ─────────────────────────────────── */
.home8-section {
    margin-bottom: 24px;
}

@media (max-width: 768px) {
    .home8-section {
        margin-bottom: 18px;
    }
}

/* ── Section Headings ────────────────────────────────── */
.home8-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.home8-section-title {
    font-size: 18px;
    font-weight: 700;
    color: #1e1e2d;
    margin-bottom: 0;
    display: flex;
    align-items: center;
}

.home8-section-title::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 18px;
    background: var(--primary);
    border-radius: 2px;
    margin-right: 8px;
}

/* ── Carousel gap fix ────────────────────────────────── */
.home8-wrapper .aiz-carousel .carousel-box {
    padding-left: 6px !important;
    padding-right: 6px !important;
}

/* ── Skeleton loader ─────────────────────────────────── */
.home8-skeleton-card {
    background: #fff;
    border-radius: 6px;
    padding: 12px;
    height: 340px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
    overflow: hidden;
}

.home8-skeleton-box {
    background: linear-gradient(90deg, #f0f0f5 25%, #e6e6ed 37%, #f0f0f5 63%);
    background-size: 400% 100%;
    animation: home8-skeleton-shimmer 1.4s ease infinite;
    border-radius: 4px;
}

@keyframes home8-skeleton-shimmer {
    0% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0 50%;
    }
}

/* ============================================================
   HOME8 HERO SECTION (PREMIUM PIXEL PERFECT UPGRADE)
   ============================================================ */
.h8-hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    align-items: stretch;
    margin-bottom: 0;
}

/* Desktop version (>= 1200px) */
@media (min-width: 1200px) {
    .h8-hero-grid {
        display: grid;
        grid-template-columns: 347px 1fr 347px;
        gap: 8px;
        align-items: stretch;
        height: 400px;
    }

    .h8-side-col {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 400px;
        gap: 8px;
    }

    .h8-promo-card {
        width: 347px !important;
        height: 128px !important;
        min-height: 128px !important;
        max-height: 128px !important;
        flex: 0 0 128px !important;
        padding: 8px 14px !important;
    }

    .h8-slider-col {
        height: 400px !important;
    }

    .h8-slider-wrapper {
        height: 400px !important;
        max-height: 400px !important;
        width: 100%;
    }
}

/* Side columns (contain 3 banners each) */
.h8-side-col {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 8px;
}

/* Tablet version (768px to 1199.98px) */
@media (min-width: 768px) and (max-width: 1199.98px) {
    .h8-hero-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .h8-slider-col {
        grid-column: 1 / span 2;
        height: auto;
    }

    .h8-side-col {
        gap: 8px;
    }

    .h8-promo-card {
        min-height: 128px;
        height: 128px !important;
    }
}

/* Mobile version (< 768px) - hide side columns entirely, slider adjusts automatically */
@media (max-width: 767.98px) {
    .h8-side-col {
        display: none !important;
    }

    .h8-slider-col {
        height: auto !important;
    }

    .h8-slider-wrapper {
        height: auto !important;
        aspect-ratio: 1200 / 600 !important;
    }

    .h8-slider-wrapper img {
        height: auto !important;
    }
}

.h8-hero-card-box {
    background: #ffffff !important;
    border-radius: 6px !important;
    border: 1px solid #e5e7eb;
    padding: 8px 14px !important;
    margin-bottom: 8px !important;
}

/* Main Slider aspect-ratio container */
.h8-slider-col {
    min-width: 0;
    overflow: hidden;
}

.h8-slider-wrapper {
    position: relative;
    width: 100%;
    border-radius: 6px !important;
    overflow: hidden;
    background: #f8fafc;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

/* PREVENT SLIDER FROM STACKING OR GROWING BEFORE JS INITIALIZATION */
.h8-slider-wrapper .aiz-carousel:not(.slick-initialized) {
    display: flex !important;
    overflow: hidden !important;
    height: 100% !important;
}

.h8-slider-wrapper .aiz-carousel:not(.slick-initialized)>div {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    height: 100% !important;
}

.h8-slider-wrapper .aiz-carousel:not(.slick-initialized)>div~div {
    display: none !important;
}

.h8-slider-wrapper .aiz-carousel,
.h8-slider-wrapper .slick-list,
.h8-slider-wrapper .slick-track,
.h8-slider-wrapper .slick-slide,
.h8-slider-wrapper .slick-slide>div,
.h8-slider-wrapper .carousel-box,
.h8-slider-wrapper .carousel-box a {
    height: 100% !important;
    display: block !important;
}

.h8-slider-wrapper img {
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 6px !important;
}

/* Promo Banner Slot Wrapper for Multi-Banner Auto Rotation */
.h8-promo-slot-wrapper {
    position: relative;
    width: 347px !important;
    height: 128px !important;
    min-height: 128px !important;
    max-height: 128px !important;
    flex: 0 0 128px !important;
    overflow: hidden !important;
    border-radius: 6px !important;
}

@media (max-width: 1199.98px) {
    .h8-promo-slot-wrapper {
        width: 100% !important;
    }
}

.h8-promo-slot-wrapper .h8-card-slot-a,
.h8-promo-slot-wrapper .h8-card-slot-b {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    transition: opacity 0.8s ease-in-out !important;
}

.h8-promo-slot-wrapper .h8-card-slot-a {
    z-index: 1;
}

.h8-promo-slot-wrapper .h8-card-slot-b {
    z-index: 2;
    opacity: 0;
    pointer-events: none;
}

.h8-promo-slot-wrapper .h8-card-slot-b.h8-fade-in {
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* ============================================================
   PROMOTIONAL BANNER — WATERMARK BACKGROUND PATTERNS
   All patterns overlay on the selected base color (background-color)
   Opacity kept very low (0.06–0.08) for a subtle watermark effect
   ============================================================ */

/* 1. Soft Corner Glow — gentle light bloom from top-right corner */
.h8-bg-pattern.h8-pattern-corner-glow {
    background-image:
        radial-gradient(ellipse at 110% -10%, rgba(255,255,255,0.13) 0%, transparent 60%),
        radial-gradient(ellipse at -10% 110%, rgba(255,255,255,0.07) 0%, transparent 55%) !important;
}

/* 2. Diagonal Lines — very faint stripes */
.h8-bg-pattern.h8-pattern-lines {
    background-image: repeating-linear-gradient(
        45deg,
        rgba(255,255,255,0.07) 0px,
        rgba(255,255,255,0.07) 1px,
        transparent 1px,
        transparent 10px
    ) !important;
    background-size: 12px 12px !important;
}

/* 3. Grid — whisper-thin crosshatch */
.h8-bg-pattern.h8-pattern-grid {
    background-image:
        linear-gradient(rgba(255,255,255,0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.07) 1px, transparent 1px) !important;
    background-size: 18px 18px !important;
}

/* 4. Zigzag — barely-there chevron texture */
.h8-bg-pattern.h8-pattern-zigzag {
    background-image:
        linear-gradient(135deg, rgba(255,255,255,0.07) 25%, transparent 25%),
        linear-gradient(225deg, rgba(255,255,255,0.07) 25%, transparent 25%),
        linear-gradient(315deg, rgba(255,255,255,0.07) 25%, transparent 25%),
        linear-gradient(45deg,  rgba(255,255,255,0.07) 25%, transparent 25%) !important;
    background-size: 14px 14px !important;
    background-position: -7px 0, -7px 0, 0 0, 0 0 !important;
}

/* 5. Circles — soft scattered rings */
.h8-bg-pattern.h8-pattern-circles {
    background-image: radial-gradient(
        circle at 50% 50%,
        rgba(255,255,255,0.08) 28%,
        transparent 58%
    ) !important;
    background-size: 24px 24px !important;
}

/* 6. Diamonds — subtle tiled lozenges */
.h8-bg-pattern.h8-pattern-diamonds {
    background-image:
        linear-gradient(45deg,  rgba(255,255,255,0.07) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(255,255,255,0.07) 25%, transparent 25%),
        linear-gradient(45deg,  transparent 75%, rgba(255,255,255,0.07) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(255,255,255,0.07) 75%) !important;
    background-size: 14px 14px !important;
    background-position: 0 0, 0 7px, 7px -7px, -7px 0 !important;
}

/* Promotional Card styling - Slim & Compact */
.h8-promo-card {
    border-radius: 4px !important;
    overflow: visible;
    /* Must be visible so absolute icon is not clipped */
    padding: 12px 14px;
    box-sizing: border-box;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    box-shadow: none;
    display: flex;
    align-items: center;
    position: relative;
}

/* Corner Badge / Tag (NEW, HOT, 50% OFF, etc.) */
.h8-promo-badge {
    position: absolute;
    top: 6px;
    right: 8px;
    font-size: 8.5px;
    font-weight: 800;
    line-height: 1;
    padding: 3.5px 8px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    z-index: 10;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
    pointer-events: none;
    white-space: nowrap;
}

/* ============================================================
   CORNER BADGE ANIMATIONS & EFFECTS (Flame 🔥, Shimmer ✨, Spark ⚡)
   NO GLOW — Sweep, Color-Shift & Bounce only
   ============================================================ */

/* 1. Fire / Flame — Hot Gradient Color-Shift Sweep 🔥 */
.h8-promo-badge.h8-badge-anim-flame {
    background-size: 200% 100% !important;
    background-image: linear-gradient(
        90deg,
        #ff4500 0%,
        #ff8c00 25%,
        #e11d48 50%,
        #ff4500 75%,
        #ff8c00 100%
    ) !important;
    color: #ffffff !important;
    overflow: hidden;
    animation: h8FlameShift 2.4s linear infinite;
}

@keyframes h8FlameShift {
    0%   { background-position: 0% 50%;   transform: scale(1)    rotate(0deg); }
    25%  { background-position: 50% 50%;  transform: scale(1.07) rotate(-1deg); }
    50%  { background-position: 100% 50%; transform: scale(1)    rotate(0deg); }
    75%  { background-position: 50% 50%;  transform: scale(1.07) rotate(1deg); }
    100% { background-position: 0% 50%;   transform: scale(1)    rotate(0deg); }
}

/* Flame — diagonal light sweep on top */
.h8-promo-badge.h8-badge-anim-flame::after {
    content: '';
    position: absolute;
    top: -60%;
    left: -80%;
    width: 40%;
    height: 220%;
    background: linear-gradient(
        90deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0.55) 50%,
        rgba(255,255,255,0) 100%
    );
    transform: rotate(20deg);
    animation: h8FlameSweep 2.4s linear infinite;
    pointer-events: none;
}

@keyframes h8FlameSweep {
    0%        { left: -80%; }
    55%, 100% { left: 130%; }
}

/* 2. Shimmer / Shiny Sweep Effect ✨ */
.h8-promo-badge.h8-badge-anim-shimmer {
    position: absolute;
    overflow: hidden;
}

.h8-promo-badge.h8-badge-anim-shimmer::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -75%;
    width: 50%;
    height: 200%;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.85) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: rotate(25deg);
    animation: h8ShimmerSweep 2.2s infinite ease-in-out;
    pointer-events: none;
}

@keyframes h8ShimmerSweep {
    0%        { left: -75%; }
    60%, 100% { left: 125%; }
}

/* 3. Spark — Rainbow Color-Cycle + Quick Jitter Bounce ⚡ */
.h8-promo-badge.h8-badge-anim-neon {
    overflow: hidden;
    animation: h8SparkCycle 3s linear infinite, h8SparkJitter 0.5s ease-in-out infinite alternate;
}

@keyframes h8SparkCycle {
    0%   { filter: hue-rotate(0deg);   }
    100% { filter: hue-rotate(360deg); }
}

@keyframes h8SparkJitter {
    0%   { transform: translateY(0px)   scale(1); }
    40%  { transform: translateY(-2px)  scale(1.06); }
    70%  { transform: translateY(1px)   scale(0.98); }
    100% { transform: translateY(0px)   scale(1); }
}

/* Spark — double diagonal sweep */
.h8-promo-badge.h8-badge-anim-neon::after {
    content: '';
    position: absolute;
    top: -60%;
    left: -90%;
    width: 35%;
    height: 220%;
    background: linear-gradient(
        90deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0.7) 50%,
        rgba(255,255,255,0) 100%
    );
    transform: rotate(20deg);
    animation: h8SparkSweep 1.6s ease-in-out infinite;
    pointer-events: none;
}

@keyframes h8SparkSweep {
    0%        { left: -90%; }
    60%, 100% { left: 130%; }
}

/* 4. Pulse — Soft Scale Heartbeat 💓 */
.h8-promo-badge.h8-badge-anim-pulse {
    animation: h8PulseBeat 1.6s ease-in-out infinite;
}

@keyframes h8PulseBeat {
    0%   { transform: scale(1);    }
    30%  { transform: scale(1.12); }
    60%  { transform: scale(1);    }
    80%  { transform: scale(1.06); }
    100% { transform: scale(1);    }
}

/* 5. Bounce — Vertical Spring Jump 🏀 */
.h8-promo-badge.h8-badge-anim-bounce {
    animation: h8BounceJump 1.4s cubic-bezier(0.36,0.07,0.19,0.97) infinite;
}

@keyframes h8BounceJump {
    0%, 100% { transform: translateY(0); }
    20%       { transform: translateY(-5px); }
    40%       { transform: translateY(0); }
    60%       { transform: translateY(-3px); }
    80%       { transform: translateY(0); }
}

/* 6. Glitter — Gold Sparkle Color Cycle ⭐ */
.h8-promo-badge.h8-badge-anim-glitter {
    background-size: 300% 100% !important;
    background-image: linear-gradient(
        90deg,
        #f59e0b 0%,
        #fde68a 30%,
        #d97706 55%,
        #fde68a 80%,
        #f59e0b 100%
    ) !important;
    color: #7c2d12 !important;
    overflow: hidden;
    animation: h8GlitterShift 2s linear infinite;
}

@keyframes h8GlitterShift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.h8-promo-badge.h8-badge-anim-glitter::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -80%;
    width: 30%;
    height: 200%;
    background: linear-gradient(
        90deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0.8) 50%,
        rgba(255,255,255,0) 100%
    );
    transform: rotate(20deg);
    animation: h8GlitterSweep 2s linear infinite;
    pointer-events: none;
}

@keyframes h8GlitterSweep {
    0%        { left: -80%; }
    60%, 100% { left: 130%; }
}

/* ============================================================
   BADGE POSITION VARIANTS
   Default (no class) = top-right (top:6px; right:8px)
   ============================================================ */

/* Top-Left */
.h8-promo-badge.h8-badge-pos-top-left {
    top: 6px;
    right: auto;
    left: 8px;
}

/* Top-Right (default — already set in base .h8-promo-badge) */
.h8-promo-badge.h8-badge-pos-top-right {
    top: 6px;
    left: auto;
    right: 8px;
}

/* Bottom-Left */
.h8-promo-badge.h8-badge-pos-bottom-left {
    top: auto;
    right: auto;
    bottom: 6px;
    left: 8px;
}

/* Bottom-Right */
.h8-promo-badge.h8-badge-pos-bottom-right {
    top: auto;
    left: auto;
    bottom: 6px;
    right: 8px;
}

.h8-promo-card:hover {
    transform: none !important;
    box-shadow: none !important;
}

.h8-promo-card:hover .h8-promo-icon-area img,
.h8-promo-card:hover .h8-deco-emoji {
    transform: none !important;
}

.h8-deco-emoji {
    font-size: 38px;
    line-height: 1;
    display: block;
    text-align: center;
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.15));
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.h8-promo-card:hover .h8-deco-emoji {
    transform: scale(1.15) rotate(-5deg);
}

/* Card Inner structure */
.h8-promo-card-body {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    /* Center content vertically */
    justify-content: space-between;
    gap: 8px;
    position: relative;
}

/* Image-Left layout: static flex row — icon on left, info on right */
.h8-promo-card-body.h8-layout-img-left {
    flex-direction: row;
    gap: 10px;
}

/* Static (non-absolute) icon when image is on the left */
.h8-promo-card-body.h8-layout-img-left .h8-promo-icon-area.h8-icon-static {
    position: static;
    transform: none;
    top: auto;
    right: auto;
    width: 76px;
    height: 76px;
    flex-shrink: 0;
}

/* Info section takes remaining space (right side) */
.h8-promo-card-body.h8-layout-img-left .h8-promo-info.h8-info-right {
    flex: 1;
    min-width: 0;
}

/* Remove right padding from text when image is on left */
.h8-promo-text-wrap.h8-text-no-pad {
    padding-right: 0 !important;
}

.h8-promo-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    height: 100%;
    min-width: 0;
}

.h8-promo-text-wrap {
    padding-right: 68px;
    min-width: 0;
}

.h8-promo-icon-area {
    position: absolute;
    right: -6px;
    /* Centered along the right side, shifted slightly left for timer overlap */
    top: 50%;
    transform: translateY(-50%);
    width: 82px;
    height: 82px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    pointer-events: none;
    overflow: visible;
}

.h8-promo-icon-area img {
    max-width: 82px !important;
    /* Slightly larger image size */
    max-height: 82px !important;
    /* Slightly larger image size */
    width: auto !important;
    height: auto !important;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.12));
}

/* Photo Mode image wrap */
.h8-promo-photo-wrap {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.h8-promo-photo-wrap img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block;
}

/* Text elements with automatic character truncation */
.h8-promo-title {
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 800;
    letter-spacing: 0.2px;
    text-transform: uppercase;
    margin: 4px 0 2px 0;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.h8-promo-desc {
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.3;
    opacity: 0.88;
    margin: 0;
    color: inherit;
    display: block;
    white-space: pre-line;
    word-break: break-word;
    max-width: 100%;
}

/* Action buttons & Timers container - Side-by-Side Horizontal Row */
.h8-promo-actions-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 5px;
    flex-wrap: nowrap;
    width: 100%;
    position: relative;
    z-index: 5;
}

/* Pill-style button */
.h8-promo-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 10.5px;
    font-weight: 700;
    text-decoration: none !important;
    transition: all 0.25s ease;
    white-space: nowrap;
    border: none;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
    flex-shrink: 0;
}

.h8-promo-btn:hover {
    filter: brightness(0.95);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
}

/* Countdown Timer (Boxed Numbers with Clean Gap Spacing) */
.h8-countdown-timer {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
}

.h8-timer-col {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.h8-timer-num {
    border-radius: 4px;
    padding: 2.5px 5px;
    font-size: 11.5px;
    font-weight: 800;
    line-height: 1.1;
    min-width: 22px;
    text-align: center;
    display: block;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.h8-timer-sep {
    font-size: 11.5px;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 9px;
    opacity: 0.7;
    padding: 0 1px;
}

.h8-timer-lbl {
    font-size: 8px;
    font-weight: 700;
    margin-top: 2px;
    letter-spacing: 0.3px;
    opacity: 0.85;
    text-transform: uppercase;
    text-align: center;
}

/* ============================================================
   ULTRA-MODERN CAMERA DSLR VIEWFINDER & SHUTTER FOCUS SNAP EFFECT
   ============================================================ */
.h8-img-wrap {
    position: relative;
    overflow: hidden;
    display: block;
}

/* Image Zoom & DSLR Sharp Contrast Focus on Hover */
.home8-product-card img,
.aiz-card-box img {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease, filter 0.4s ease !important;
}

.home8-product-card:hover .primary-img,
.home8-product-card:hover .secondary-img,
.aiz-card-box:hover .primary-img,
.aiz-card-box:hover .secondary-img {
    transform: scale(1.05) !important;
    filter: brightness(1.03) contrast(1.03) !important;
}

/* Secondary image (fades in when hovered) */
.home8-product-card .secondary-img,
.aiz-card-box .secondary-img {
    opacity: 0;
    pointer-events: none;
    z-index: 1;
}

.home8-product-card:hover .secondary-img,
.aiz-card-box:hover .secondary-img {
    opacity: 1 !important;
}

/* Camera Viewfinder Focus Corners (4 Framing Brackets) */
.h8-cam-focus-corners {
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    bottom: 8px;
    pointer-events: none;
    z-index: 3;
}

.h8-corner {
    position: absolute;
    width: 14px;
    height: 14px;
    border-color: rgba(255, 255, 255, 0.9);
    border-style: solid;
    border-width: 0;
    opacity: 0;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.h8-tl {
    top: 0;
    left: 0;
    border-top-width: 2.5px;
    border-left-width: 2.5px;
    transform: translate(-6px, -6px);
}

.h8-tr {
    top: 0;
    right: 0;
    border-top-width: 2.5px;
    border-right-width: 2.5px;
    transform: translate(6px, -6px);
}

.h8-bl {
    bottom: 0;
    left: 0;
    border-bottom-width: 2.5px;
    border-left-width: 2.5px;
    transform: translate(-6px, 6px);
}

.h8-br {
    bottom: 0;
    right: 0;
    border-bottom-width: 2.5px;
    border-right-width: 2.5px;
    transform: translate(6px, 6px);
}

/* On Hover: Corners Lock & Snap onto Image Frame */
.home8-product-card:hover .h8-corner,
.aiz-card-box:hover .h8-corner {
    opacity: 1;
    transform: translate(0, 0);
}

/* Camera Shutter Micro-Flash Snap */
.h8-cam-shutter-flash {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.65);
    opacity: 0;
    pointer-events: none;
    z-index: 4;
}

.home8-product-card:hover .h8-cam-shutter-flash,
.aiz-card-box:hover .h8-cam-shutter-flash {
    animation: h8CamShutterSnap 0.3s ease-out forwards;
}

@keyframes h8CamShutterSnap {
    0% {
        opacity: 0.6;
    }

    30% {
        opacity: 0.15;
    }

    100% {
        opacity: 0;
    }
}

/* ============================================================
   HOME 8 SLIDER DOTS PAGINATION (PREMIUM MODERN ROUND DOTS)
   ============================================================ */
.h8-slider-wrapper .slick-dots {
    position: absolute !important;
    bottom: 14px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    background: rgba(0, 0, 0, 0.35) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    backdrop-filter: blur(6px) !important;
    padding: 5px 10px !important;
    border-radius: 20px !important;
    z-index: 10 !important;
    margin: 0 !important;
    list-style: none !important;
}

.h8-slider-wrapper .slick-dots li {
    margin: 0 !important;
    padding: 0 !important;
    display: inline-block !important;
    line-height: 0 !important;
}

.h8-slider-wrapper .slick-dots button {
    width: 9px !important;
    height: 9px !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.55) !important;
    cursor: pointer !important;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
    font-size: 0 !important;
    color: transparent !important;
    outline: none !important;
}

.h8-slider-wrapper .slick-dots button:hover {
    background: rgba(255, 255, 255, 0.9) !important;
}

.h8-slider-wrapper .slick-dots li.slick-active button {
    width: 22px !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35) !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   GLOBAL: Hide colon ":" separators between countdown
   timer boxes — applies to ALL countdown timers site-wide
   (home8 promo banners, flash sale, deal countdown, etc.)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.h8-timer-sep,
.countdown-separator,
.aiz-count-down .countdown-separator,
.aiz-count-down-box .countdown-separator,
.aiz-count-down-circle .countdown-separator,
.aiz-count-down-lg .countdown-separator {
    display: none !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   HEADER ACTIVE ITEMS (Cart & Wishlist Brand Color Highlight)
   When count > 0, highlight icons & text in Brand Color
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#cart_items.has-active-items svg,
#cart_items.has-active-items svg path,
#cart_items.has-active-items .cart-count,
#cart_items.has-active-items .nav-box-text,
#cart_items.has-active-items a,
#cart_items.has-active-items span,
#wishlist.has-active-items svg,
#wishlist.has-active-items svg path,
#wishlist.has-active-items i,
#wishlist.has-active-items .wishlist-count,
#wishlist.has-active-items a,
#wishlist.has-active-items span,
a.has-active-items,
a.has-active-items span,
a.has-active-items svg,
a.has-active-items svg path {
    color: var(--primary) !important;
    fill: var(--primary) !important;
}

/* ==========================================================================
   Drop Ship Badge — Soft Glow Pulse Animation
   ========================================================================== */

@keyframes dropship-glow-pulse {
    0%   { box-shadow: 0 0 4px rgba(40, 167, 69, 0.4),  0 2px 6px rgba(0,0,0,0.15); transform: scale(1);    opacity: 1;    }
    50%  { box-shadow: 0 0 12px rgba(40, 167, 69, 0.75), 0 4px 14px rgba(0,0,0,0.12); transform: scale(1.04); opacity: 0.92; }
    100% { box-shadow: 0 0 4px rgba(40, 167, 69, 0.4),  0 2px 6px rgba(0,0,0,0.15); transform: scale(1);    opacity: 1;    }
}

.dropship-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
    color: #ffffff !important;
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 0.4px;
    padding: 3px 8px 3px 6px;
    border-radius: 20px;
    z-index: 3;
    animation: dropship-glow-pulse 2.6s ease-in-out infinite;
    border: 1px solid rgba(255,255,255,0.25);
    backdrop-filter: blur(2px);
    cursor: default;
    text-transform: uppercase;
    position: absolute;
    bottom: 8px;
    right: 8px;
}

.dropship-badge svg {
    flex-shrink: 0;
    opacity: 0.92;
}