/*======================================================
SIRWAY COMPONENTS
Reusable UI Components
======================================================*/


/*======================================================
HEADER
======================================================*/

.header{
    position:sticky;
    top:0;
    left:0;
    width:100%;
    z-index:999;
    background:#ffffff;
    box-shadow:0 8px 30px rgba(0,0,0,.05);
    transition:.35s ease;
}

.navbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    height:82px;
}

.logo img{
    height:55px;
    display:block;
}

.btn-primary,
.btn-secondary{

    font-weight:600;

    letter-spacing:.3px;

    text-transform:none;

}


/*======================================================
NAVIGATION
======================================================*/

.nav-links{
    display:flex;
    align-items:center;
    gap:32px;
    list-style:none;
}

.nav-links a{
    position:relative;
    text-decoration:none;
    color:#222;
    font-size:15px;
    font-weight:600;
    transition:.3s;
}

.nav-links a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:#8B5CF6;

    transition:.35s;

}

.nav-links a:hover{

    color:#8B5CF6;

}

.nav-links a:hover::after{

    width:100%;

}


/*======================================================
SEARCH BOX
======================================================*/

.search-box{

    width:260px;

    display:flex;

    align-items:center;

    background:#f6f6f6;

    padding:12px 18px;

    border-radius:50px;

    transition:.3s;

}

.search-box:hover{

    background:#eeeeee;

}

.search-box i{

    color:#777;

    margin-right:10px;

}

.search-box input{

    width:100%;

    border:none;

    background:none;

    outline:none;

    font-size:14px;

}

/*======================================================
HEADER ICONS
======================================================*/

.header-icons{

    display:flex;

    align-items:center;

    gap:18px;

}

.header-icons a{

    color:#222;

    font-size:20px;

    transition:.35s;

}

.header-icons a:hover{

    color:#8B5CF6;

    transform:translateY(-3px);

}

/*======================================================
BUTTONS
======================================================*/

.btn-primary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:16px 34px;

    border-radius:50px;

    background:#8B5CF6;

    color:#fff;

    text-decoration:none;

    font-weight:600;

    transition:.35s;

}

.btn-primary:hover{

    background:#6d28d9;

    transform:translateY(-4px);

    box-shadow:0 15px 35px rgba(139,92,246,.35);

}

.btn-secondary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:16px 34px;

    border-radius:50px;

    border:2px solid #8B5CF6;

    color:#8B5CF6;

    background:#fff;

    text-decoration:none;

    font-weight:600;

    transition:.35s;

}

.btn-secondary:hover{

    background:#8B5CF6;

    color:#fff;

}

/*======================================================
BRAND STRIP
======================================================*/

.brand-strip{
    display:flex;
    gap:25px;
    margin-top:40px;
    align-items:center;
    flex-wrap:wrap;
}

.brand-item{
    display:flex;
    align-items:center;
    justify-content:center;
    width:120px;
    height:55px;
}

.brand-item img{
    max-width:100%;
    max-height:40px;
    object-fit:contain;
}

/*======================================================
FLOATING CARD
======================================================*/

.floating-card{

    position:absolute;

    background:#fff;

    padding:14px 20px;

    border-radius:16px;

    box-shadow:0 15px 35px rgba(0,0,0,.08);

    display:flex;

    align-items:center;

    gap:10px;

    font-weight:600;

    animation:float 3s ease-in-out infinite;

}

.floating-card i{

    color:#8B5CF6;

}

/*======================================================
FORM ELEMENTS
======================================================*/

input,

textarea{

    width:100%;

    padding:16px;

    border:1px solid #ddd;

    border-radius:12px;

    outline:none;

    transition:.3s;

}

input:focus,

textarea:focus{

    border-color:#8B5CF6;

}

/*======================================================
SOCIAL ICONS
======================================================*/

.social-icons{

    display:flex;

    gap:15px;

}

.social-icons a{

    width:42px;

    height:42px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#f5f5f5;

    color:#555;

    transition:.35s;

}

.social-icons a:hover{

    background:#8B5CF6;

    color:#fff;

}

/*======================================================
COMMON CARD
======================================================*/

.card{
    background:#ffffff;
    border-radius:24px;
    overflow:hidden;
    box-shadow:0 12px 35px rgba(0,0,0,.08);
    transition:all .35s ease;
}

.card:hover{
    transform:translateY(-10px);
    box-shadow:0 22px 50px rgba(0,0,0,.14);
}


/*======================================================
CATEGORY BADGE
======================================================*/

.category-tag{

    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:8px 18px;

    background:#8B5CF6;
    color:#fff;

    border-radius:50px;

    font-size:12px;
    font-weight:700;
    letter-spacing:.6px;

}


/*======================================================
DISCOUNT BADGE
======================================================*/

.discount{

    position:absolute;

    top:18px;
    left:18px;

    background:#ef4444;
    color:#fff;

    padding:8px 14px;

    border-radius:40px;

    font-size:12px;
    font-weight:700;

}


/*======================================================
RATING
======================================================*/

.rating{

    display:flex;
    align-items:center;
    gap:4px;

    color:#F59E0B;

    font-size:15px;

    margin:12px 0;

}


/*======================================================
PRICE
======================================================*/

.price{

    display:flex;
    align-items:center;
    gap:12px;

    font-size:24px;

    font-weight:700;

    color:#111827;

}

.price span{

    font-size:16px;

    color:#999;

    text-decoration:line-through;

}


/*======================================================
COLLECTION CARD
======================================================*/

.collection-card{

    position:relative;

    overflow:hidden;

    border-radius:24px;

    cursor:pointer;

    transition:.4s ease;

}

.collection-card img{

    width:100%;

    display:block;

    transition:.6s;

}

.collection-card:hover img{

    transform:scale(1.08);

}

.collection-overlay{

    position:absolute;

    left:0;
    right:0;
    bottom:0;

    padding:28px;

    color:#fff;

    background:linear-gradient(
        transparent,
        rgba(0,0,0,.88)
    );

}

.collection-overlay h3{

    margin:14px 0;

    font-size:24px;

}

.collection-overlay a{

    color:#fff;

    text-decoration:none;

    font-weight:600;

}


/*======================================================
CATEGORY CARD
======================================================*/

.category-card{

    position:relative;

    overflow:hidden;

    border-radius:22px;

    display:block;

    transition:.35s;

}

.category-card img{

    width:100%;

    display:block;

    transition:.5s;

}

.category-card:hover img{

    transform:scale(1.08);

}

.category-name{

    position:absolute;

    left:50%;
    bottom:24px;

    transform:translateX(-50%);

    background:rgba(255,255,255,.95);

    padding:14px 30px;

    border-radius:40px;

    font-weight:700;

    transition:.35s;

}

.category-card:hover .category-name{

    background:#8B5CF6;

    color:#fff;

}


/*======================================================
BRAND CARD
======================================================*/

.brand-card{

    display:flex;

    justify-content:center;

    align-items:center;

    background:#fff;

    border-radius:20px;

    box-shadow:0 10px 30px rgba(0,0,0,.06);

    transition:.35s;

}

/*=====================================
Premium Hover Glow
=====================================*/

.brand-card{
    position:relative;
}

.brand-card::before{

    content:"";
    position:absolute;
    inset:0;

    background:linear-gradient(
        135deg,
        rgba(124,58,237,.04),
        rgba(236,72,153,.03)
    );

    opacity:0;
    transition:.4s ease;

    pointer-events:none;
}

.brand-card:hover::before{

    opacity:1;

}

.brand-card img{

    max-width:120px;

    filter:grayscale(100%);

    transition:.35s;

}

.brand-card:hover{

    transform:translateY(-8px);

}

.brand-card:hover img{

    filter:none;

}

.brand-card{

    position:relative;

}

.brand-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        135deg,
        rgba(124,58,237,.04),
        rgba(236,72,153,.03)
    );

    opacity:0;

    transition:.4s;

}

.brand-card:hover::before{

    opacity:1;

}


/*======================================================
EDITOR CARD
======================================================*/

.editor-card{

    background:#fff;

    border-radius:22px;

    overflow:hidden;

    transition:.35s;

    box-shadow:0 12px 35px rgba(0,0,0,.08);

}

.editor-card:hover{

    transform:translateY(-10px);

}

.editor-card img{

    width:100%;

    display:block;

    transition:.5s;

}

.editor-card:hover img{

    transform:scale(1.05);

}

.editor-content{

    padding:24px;

}

.editor-content span{

    color:#8B5CF6;

    font-size:13px;

    font-weight:700;

}

.editor-content h3{

    margin:12px 0;

    font-size:22px;

}


/*======================================================
PRODUCT CARD
======================================================*/

.product{

    background:#fff;

    border-radius:24px;

    overflow:hidden;

    transition:.35s;

    box-shadow:0 12px 35px rgba(0,0,0,.08);

}

.product{

    position:relative;

}

.product::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:24px;

    border:1px solid transparent;

    pointer-events:none;

    transition:.4s;

}

.product:hover::after{

    border-color:rgba(124,58,237,.20);

}

.product:hover{

    transform:translateY(-10px);

}

.product-image{

    position:relative;

    overflow:hidden;

}

.product-image img{

    width:100%;

    display:block;

    transition:.5s;

}

.product:hover .product-image img{

    transform:scale(1.08);

}

.product-info{

    padding:25px;

}

.product-info h3{

    font-size:22px;

    margin-bottom:8px;

}

.product-info p{

    color:#777;

    margin-bottom:12px;

}

.stores{

    display:flex;

    gap:12px;

    margin:20px 0;

}

.stores img{

    width:40px;

    height:40px;

    object-fit:contain;

}


/*======================================================
BUY BUTTON
======================================================*/

.buy-btn{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    width:100%;

    padding:15px;

    border-radius:12px;

    background:#8B5CF6;

    color:#fff;

    text-decoration:none;

    font-weight:600;

    transition:.35s;

}

.buy-btn:hover{

    background:#6D28D9;

}
/*======================================
PREMIUM HOVER EFFECTS
======================================*/

/* Global Transition */

.collection-card,
.category-card,
.brand-card,
.editor-card,
.product,
.story-card,
.feature-story,
.floating-card,
.btn-primary,
.btn-secondary{
    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease,
        background .35s ease;
}

/*==============================
Collection Cards
==============================*/

.collection-card:hover{
    transform:translateY(-10px);
    box-shadow:0 18px 40px rgba(0,0,0,.12);
}

/* Zoom image */

.collection-card img{
    transition:transform .6s ease;
}

.collection-card:hover img{
    transform:scale(1.08);
}

/*==============================
Category Cards
==============================*/

.category-card:hover{
    transform:translateY(-8px);
    box-shadow:0 16px 35px rgba(0,0,0,.10);
}

.category-card img{
    transition:transform .6s ease;
}

.category-card:hover img{
    transform:scale(1.06);
}

/*==============================
Brand Cards
==============================*/

.brand-card:hover{

    transform:translateY(-8px);

    box-shadow:0 15px 35px rgba(124,58,237,.15);

    border-color:#c4b5fd;

}

.brand-card:hover img{

    transform:scale(1.08);

}

/*==============================
Editor's Choice
==============================*/

.editor-card:hover{

    transform:translateY(-10px);

    box-shadow:0 20px 45px rgba(0,0,0,.12);

}

.editor-card img{

    transition:transform .6s ease;

}

.editor-card:hover img{

    transform:scale(1.08);

}

/*==============================
Products
==============================*/

.product:hover{

    transform:translateY(-10px);

    box-shadow:0 20px 45px rgba(0,0,0,.12);

}

.product-image{

    overflow:hidden;

}

.product-image img{

    transition:transform .6s ease;

}

.product:hover .product-image img{

    transform:scale(1.08);

}

/*==============================
Story Cards
==============================*/

.story-card:hover{

    transform:translateX(8px);

}

.story-card img{

    transition:transform .5s ease;

}

.story-card:hover img{

    transform:scale(1.08);

}

/*==============================
Feature Story
==============================*/

.feature-story:hover{

    transform:translateY(-10px);

    box-shadow:0 20px 45px rgba(0,0,0,.12);

}

.feature-story img{

    transition:transform .7s ease;

}

.feature-story:hover img{

    transform:scale(1.05);

}

/*==============================
Floating Cards
==============================*/

.floating-card:hover{

    transform:translateY(-8px) scale(1.05);

}

/*==============================
Section Title
==============================*/

.section-title h2{

    transition:.3s;

}

.section-title:hover h2{

    letter-spacing:.5px;

}

/*======================================
STEP 7 - PHASE 2
MICRO INTERACTIONS
======================================*/

/*==============================
PRIMARY BUTTON
==============================*/

.btn-primary,
.btn-secondary{
    position:relative;
    overflow:hidden;
}

.btn-primary:hover,
.btn-secondary:hover{
    transform:translateY(-3px);
}

.btn-primary:active,
.btn-secondary:active{
    transform:scale(.97);
}

/* Shine Effect */

.btn-primary::before,
.btn-secondary::before{
    content:"";
    position:absolute;
    top:0;
    left:-120%;
    width:60%;
    height:100%;
    background:rgba(255,255,255,.35);
    transform:skewX(-25deg);
    transition:.6s;
}

.btn-primary:hover::before,
.btn-secondary:hover::before{
    left:150%;
}

/*==============================
NAVIGATION LINKS
==============================*/

.nav-links a{

    position:relative;

    transition:.3s ease;

}

.nav-links a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-6px;

    width:0;

    height:2px;

    background:#7c3aed;

    transition:.35s;

}

.nav-links a:hover{

    color:#7c3aed;

}

.nav-links a:hover::after{

    width:100%;

}

/* Active Link */

.nav-links a.active{

    color:#7c3aed;

}

.nav-links a.active::after{

    width:100%;

}

/*==============================
HEADER ICONS
==============================*/

.header-icons a{

    transition:.3s ease;

}

.header-icons a:hover{

    color:#7c3aed;

    transform:translateY(-4px) scale(1.12);

}

/*==============================
SEARCH BOX
==============================*/

.search-box{

    transition:.35s ease;

}

.search-box:hover{

    box-shadow:0 10px 25px rgba(124,58,237,.15);

}

.search-box:focus-within{

    border-color:#7c3aed;

    box-shadow:0 0 0 4px rgba(124,58,237,.12);

}

/*==============================
SHOP LINKS
==============================*/

.shop-links a{

    transition:.3s;

}

.shop-links a:hover{

    color:#7c3aed;

    transform:translateY(-2px);

}

/*==============================
SOCIAL ICONS
==============================*/

.social-icons a{

    transition:.3s ease;

}

.social-icons a:hover{

    transform:translateY(-5px) rotate(8deg);

    color:#7c3aed;

}

/*==============================
BACK TO TOP
==============================*/

.back-top{

    transition:.35s ease;

}

.back-top:hover{

    transform:translateY(-4px);

    letter-spacing:.5px;

}

/*==============================
INPUTS
==============================*/

input{

    transition:.3s ease;

}

input:focus{

    transform:translateY(-2px);

}

/*==============================
LOGO
==============================*/

.logo img{

    transition:.35s ease;

}

.logo:hover img{

    transform:scale(1.06);

}

/*======================================
STEP 7 - PHASE 3
SCROLL REVEAL ANIMATION
======================================*/

.reveal{

    opacity:0;

    transform:translateY(70px);

    transition:
        opacity .8s ease,
        transform .8s ease;

    will-change:opacity,transform;

}

.reveal.active{

    opacity:1;

    transform:translateY(0);

}

/* Delay Classes */

.delay-1{

    transition-delay:.15s;

}

.delay-2{

    transition-delay:.3s;

}

.delay-3{

    transition-delay:.45s;

}

.delay-4{

    transition-delay:.6s;

}

/*======================================
PREMIUM BUTTON GRADIENT
======================================*/

.btn-primary{

    background:linear-gradient(
        135deg,
        #7c3aed,
        #9333ea
    );

    color:#fff;

    box-shadow:
    0 12px 30px rgba(124,58,237,.25);

}

.btn-primary:hover{

    box-shadow:
    0 18px 40px rgba(124,58,237,.35);

}

.btn-secondary{

    background:#fff;

    border:2px solid #7c3aed;

    color:#7c3aed;

}

.btn-secondary:hover{

    background:#7c3aed;

    color:#fff;

}

/*======================================
STEP 7 - PHASE 6
GLASSMORPHISM + PREMIUM UI
======================================*/

/* Premium Card */

.collection-card,
.category-card,
.brand-card,
.editor-card,
.product,
.story-card{

    background:rgba(255,255,255,.82);

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.35);

    border-radius:24px;

    overflow:hidden;

    transition:.45s ease;

}

/* Premium Hover */

.collection-card:hover,
.category-card:hover,
.brand-card:hover,
.editor-card:hover,
.product:hover,
.story-card:hover{

    transform:translateY(-10px);

    box-shadow:

    0 30px 60px rgba(0,0,0,.10),

    0 12px 25px rgba(124,58,237,.10);

}

/* Image Zoom */

.collection-card img,
.category-card img,
.product-image img,
.editor-card img{

    transition:.5s ease;

}

.collection-card:hover img,
.category-card:hover img,
.product:hover img,
.editor-card:hover img{

    transform:scale(1.06);

}
/*======================================
BUTTON RIPPLE EFFECT
======================================*/

.btn-primary,
.btn-secondary,
.buy-btn{

    position:relative;
    overflow:hidden;

}

.ripple{

    position:absolute;

    width:20px;
    height:20px;

    background:rgba(255,255,255,.5);

    border-radius:50%;

    transform:scale(0);

    animation:ripple .6s linear;

    pointer-events:none;

}

@keyframes ripple{

    to{

        transform:scale(15);

        opacity:0;

    }

}