/* ============================================================
   Zayne Hero Slider — Owl Carousel Styles v1.1
   Animations: Left (text), Bottom (button + element), Top (bottle)
   ============================================================ */

/* ---- Container ---- */
.zayne-hero-slider {
    width: 100%;
    position: relative;
    overflow: hidden;
    min-height: 748px;
}

/*
 * Owl sets display:none on .owl-carousel before init,
 * which collapses the banner. Override to maintain height.
 * visibility:hidden keeps layout space but hides raw slide stack.
 */
.zayne-hero-slider.owl-carousel:not(.owl-loaded) {
    display: block !important;
    visibility: hidden;
}
.zayne-hero-slider.owl-carousel.owl-loaded {
    visibility: visible;
}

/* Owl stage and items: stretch to full container height */
.zayne-hero-slider .owl-stage-outer,
.zayne-hero-slider .owl-stage,
.zayne-hero-slider .owl-item {
    height: 100%;
}
/* ---- Each Slide ---- */
.zayne-slide {
    position: relative;
    width: 100%;
    height: 748px;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    overflow: hidden;
}

/* ---- Dark overlay (removed) ---- */
.zayne-slide-overlay {
    display: none;
}

/* ---- Inner layout: text left, product right ---- */
.zayne-slide-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

/* ============================================================
   ANIMATION INITIAL STATES
   GSAP will tween these to their final positions
   ============================================================ */
.zayne-anim-left {
    opacity: 0;
    transform: translateX(-80px);
}
.zayne-anim-bottom {
    opacity: 0;
    transform: translateY(60px);
}
.zayne-anim-top {
    opacity: 0;
    transform: translateY(-80px);
}

/* Active slide items are visible (GSAP controls this,
   but we add a fallback for no-JS environments) */
.owl-item.active .zayne-anim-left,
.owl-item.active .zayne-anim-bottom,
.owl-item.active .zayne-anim-top {
    /* GSAP overrides inline — these are fallbacks */
}

/* ---- Content (left side) ---- */
.zayne-slide-content {
    max-width: 600px;
    color: #fff;
}

.zayne-slide-title {
    font-family: 'Inter', sans-serif;
    font-size: 60px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: 7px;
    color: #ffffff;
    margin: 0 0 5px 0;
    text-transform: uppercase;
}

.zayne-slide-subtitle {
    font-family: 'Inter', sans-serif;
    font-size: 60px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: 7px;
    color: #ffffff;
    margin: 0 0 25px 0;
    text-transform: uppercase;
}

.zayne-slide-desc {
    background-color: rgba(0, 0, 0, 0.33);
    border-radius: 4px;
    padding: 15px;
    margin-bottom: 35px;
    max-width: 563px;
}

.zayne-slide-desc p {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 300;
    line-height: 1.6;
    letter-spacing: 1px;
    color: #ffffff;
    margin: 0;
}

/* ---- Buy Now button ---- */
.zayne-slide-btn {
    display: inline-block;
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: #ffffff;
    background-color: #000000;
    padding: 14px 40px;
    border-radius: 5px;
    text-decoration: none;
    letter-spacing: 1px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.zayne-slide-btn:hover,
.zayne-slide-btn:focus {
    background-color: #b28933;
    color: #ffffff;
    text-decoration: none;
}

/* ---- Product Image area (right side) ---- */
.zayne-slide-product {
    flex-shrink: 0;
    /* Match RevSlider proportions: rocks ~553px wide, bottle ~364px wide */
    width: 560px;
    position: relative;
    align-self: stretch;   /* fill full slide height */
}

/* Wrap: full height container so images can be absolutely positioned
   just like RevSlider layers */
.zayne-product-wrap {
    position: relative;
    width: 100%;
    height: 100%;            /* fill .zayne-slide-product height */
    min-height: 680px;       /* matches slide height fallback */
}

/* -------------------------------------------
   Element / decorative image (rocks, splash…)
   RevSlider ref: yo:214px from top, 553×532px
   → lower portion, sits behind bottle
   ------------------------------------------- */
.zayne-product-element {
    position: absolute;
    bottom: 0;               /* anchored to bottom of container */
    left: 50%;
    /* NOTE: no CSS transform here — GSAP manages xPercent:-50 + y together */
    width: 100%;
    max-width: 553px;
    height: auto;
    object-fit: contain;
    z-index: 2 !important;
}

/* -------------------------------------------
   Bottle image (product)
   RevSlider ref: yo:67px from top, 364×565px
   → taller, higher, centred, on top of element
   ------------------------------------------- */
.zayne-product-bottle {
    position: absolute;
    top: 0;                  /* anchored to top of container */
    left: 50%;
    /* NOTE: no CSS transform here — GSAP manages xPercent:-50 + y together */
    width: 70%;              /* narrower than element, like RevSlider */
    max-width: 364px;
    height: auto;
    max-height: 620px;
    object-fit: contain;
    z-index: 1 !important;
}

/* ---- Owl Nav Buttons ---- */
.zayne-hero-slider .owl-nav {
    position: absolute;
    top: 50%;
    width: 100%;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    pointer-events: none;
    z-index: 10;
    padding: 0 15px;
    box-sizing: border-box;
}

.zayne-hero-slider .owl-prev,
.zayne-hero-slider .owl-next {
    pointer-events: all;
    background: rgba(0,0,0,0.5) !important;
    color: #fff !important;
    width: 50px;
    height: 50px;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    transition: background 0.3s;
    border: none;
}

.zayne-hero-slider .owl-prev:hover,
.zayne-hero-slider .owl-next:hover {
    background: #b28933 !important;
}

.zayne-nav-prev,
.zayne-nav-next {
    font-size: 18px;
    line-height: 1;
}

/* ---- Owl Dots ---- */
.zayne-hero-slider .owl-dots {
    position: absolute;
    bottom: 20px;
    width: 100%;
    text-align: center;
    z-index: 10;
}

.zayne-hero-slider .owl-dot span {
    background: rgba(255,255,255,0.5) !important;
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    margin: 0 5px !important;
    transition: background 0.3s;
}

.zayne-hero-slider .owl-dot.active span,
.zayne-hero-slider .owl-dot:hover span {
    background: #b28933 !important;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Tablet landscape (1024px) */
@media (max-width: 1024px) {
    .zayne-hero-slider { min-height: 620px; }
    .zayne-slide { height: 620px; }
    .zayne-slide-title,
    .zayne-slide-subtitle { font-size: 44px; letter-spacing: 5px; }

    .zayne-slide-product  { width: 380px; }
    .zayne-product-wrap   { min-height: 500px; }
    .zayne-product-bottle { max-width: 260px; max-height: 480px; }
    .zayne-product-element{ max-width: 380px; }
}

/* ============================================================
   MOBILE RESPONSIVE — 320px to 768px
   Layout: Left text | Right images (side-by-side maintained)
   ============================================================ */

/* Tablet portrait (768px) */
@media (max-width: 768px) {
    .zayne-hero-slider { min-height: 420px; }
    .zayne-slide {
        height: 420px;
        min-height: 420px;
        padding: 0;
        align-items: center;
    }
    .zayne-slide-inner {
        flex-direction: row;          /* keep side-by-side */
        align-items: center;
        justify-content: space-between;
        padding: 0 20px;
        gap: 16px;
    }

    /* LEFT: text content */
    .zayne-slide-content {
        max-width: 55%;
        flex: 1 1 55%;
        text-align: left;
        z-index: 3;
        position: relative;
    }
    .zayne-slide-title,
    .zayne-slide-subtitle {
        font-size: 28px;
        letter-spacing: 3px;
        margin-bottom: 4px;
    }
    .zayne-slide-desc {
        max-width: 100%;
        margin-bottom: 14px;
        padding: 10px 12px;
    }
    .zayne-slide-desc p { font-size: 13px; line-height: 1.5; }
    .zayne-slide-btn    { font-size: 13px; padding: 10px 22px; }

    /* RIGHT: product images */
    .zayne-slide-product {
        flex: 0 0 40%;
        width: 40%;
        align-self: stretch;
        position: relative;
        height: auto;
        margin-top: 0;
    }
    .zayne-product-wrap   { min-height: 380px; height: 100%; }
    .zayne-product-bottle { max-width: 160px; max-height: 340px; }
    .zayne-product-element{ max-width: 220px; }

    .zayne-hero-slider .owl-prev,
    .zayne-hero-slider .owl-next {
        width: 38px;
        height: 38px;
        font-size: 15px;
    }
}

/* Mobile (600px) */
@media (max-width: 600px) {
    .zayne-hero-slider { min-height: 360px; }
    .zayne-slide { height: 360px; min-height: 360px; }

    .zayne-slide-inner { padding: 0 14px; gap: 12px; }

    .zayne-slide-content { max-width: 54%; flex: 1 1 54%; }
    .zayne-slide-title,
    .zayne-slide-subtitle { font-size: 22px; letter-spacing: 2px; }
    .zayne-slide-desc p   { font-size: 12px; }
    .zayne-slide-btn      { font-size: 12px; padding: 9px 18px; }

    .zayne-slide-product  { flex: 0 0 42%; width: 42%; }
    .zayne-product-wrap   { min-height: 320px; }
    .zayne-product-bottle { max-width: 130px; max-height: 290px; }
    .zayne-product-element{ max-width: 190px; }
}

/* Mobile (480px) */
@media (max-width: 480px) {
    .zayne-hero-slider { min-height: 300px; }
    .zayne-slide { height: 300px; min-height: 300px; }

    .zayne-slide-inner { padding: 0 12px; gap: 10px; }

    .zayne-slide-content { max-width: 52%; flex: 1 1 52%; }
    .zayne-slide-title,
    .zayne-slide-subtitle { font-size: 18px; letter-spacing: 1.5px; margin-bottom: 3px; }
    .zayne-slide-subtitle { margin-bottom: 8px; }
    .zayne-slide-desc     { padding: 8px 10px; margin-bottom: 10px; }
    .zayne-slide-desc p   { font-size: 11px; line-height: 1.45; }
    .zayne-slide-btn      { font-size: 11px; padding: 8px 14px; }

    .zayne-slide-product  { flex: 0 0 44%; width: 44%; }
    .zayne-product-wrap   { min-height: 260px; }
    .zayne-product-bottle { max-width: 110px; max-height: 240px; }
    .zayne-product-element{ max-width: 160px; }

    .zayne-hero-slider .owl-prev,
    .zayne-hero-slider .owl-next {
        width: 32px;
        height: 32px;
        font-size: 13px;
    }
}

/* Mobile (390px) */
@media (max-width: 390px) {
    .zayne-hero-slider { min-height: 260px; }
    .zayne-slide { height: 260px; min-height: 260px; }

    .zayne-slide-inner { padding: 0 10px; gap: 8px; }

    .zayne-slide-title,
    .zayne-slide-subtitle { font-size: 15px; letter-spacing: 1px; }
    .zayne-slide-desc     { margin-bottom: 8px; padding: 6px 8px; }
    .zayne-slide-desc p   { font-size: 10px; }
    .zayne-slide-btn      { font-size: 10px; padding: 7px 12px; }

    .zayne-product-wrap   { min-height: 220px; }
    .zayne-product-bottle { max-width: 90px; max-height: 200px; }
    .zayne-product-element{ max-width: 130px; }
}

/* Very small (320px) */
@media (max-width: 320px) {
    .zayne-hero-slider { min-height: 230px; }
    .zayne-slide { height: 230px; min-height: 230px; }

    .zayne-slide-inner { padding: 0 8px; gap: 6px; }

    .zayne-slide-title,
    .zayne-slide-subtitle { font-size: 13px; letter-spacing: 0.5px; }
    .zayne-slide-desc     { margin-bottom: 6px; padding: 5px 7px; }
    .zayne-slide-desc p   { font-size: 9px; }
    .zayne-slide-btn      { font-size: 9px; padding: 6px 10px; }

    .zayne-product-wrap   { min-height: 190px; }
    .zayne-product-bottle { max-width: 75px; max-height: 170px; }
    .zayne-product-element{ max-width: 110px; }

    .zayne-hero-slider .owl-prev,
    .zayne-hero-slider .owl-next {
        width: 28px;
        height: 28px;
        font-size: 11px;
    }
}