/* ==========================================================
   GLYDE Experience Center
   Components
==========================================================*/

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

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:12px 18px;

    border-radius:10px;

    font-size:14px;

    font-weight:600;

    cursor:pointer;

    transition:all .3s ease;

}

.btn-primary{

    background:var(--primary);

    color:#fff;

}

.btn-primary:hover{

    background:var(--primary-dark);

    transform:translateY(-2px);

}

.btn-outline{

    background:#fff;

    color:#111;

    border:1px solid #ddd;

}

.btn-outline:hover{

    background:#111;

    color:#fff;

}


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

.product-card{

    background:#fff;

    border-radius:18px;

    overflow:hidden;

    box-shadow:var(--shadow-sm);

    transition:all .35s ease;

    cursor:pointer;

    display:flex;

    flex-direction:column;

}

.product-card:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow-lg);

}


/* ===========================
   PRODUCT IMAGE
=========================== */

.product-image{

    position:relative;

    overflow:hidden;

    background:#f8f8f8;

}

.product-image img{

    width:100%;

    height:260px;

    object-fit:cover;

    transition:transform .5s ease;

}

.product-card:hover .product-image img{

    transform:scale(1.08);

}


/* ===========================
   BADGES
=========================== */

.badge{

    position:absolute;

    left:15px;

    padding:6px 12px;

    border-radius:30px;

    color:#fff;

    font-size:12px;

    font-weight:600;

}

.badge.featured{

    top:15px;

    background:var(--primary);

}

.badge.new{

    top:52px;

    background:#2E8B57;

}


/* ===========================
   PRODUCT BODY
=========================== */

.product-body{

    padding:22px;

    display:flex;

    flex-direction:column;

    flex:1;

}

.product-category{

    font-size:13px;

    color:var(--gray);

    margin-bottom:8px;

    text-transform:uppercase;

    letter-spacing:1px;

}

.product-title{

    font-size:22px;

    font-weight:700;

    color:#111;

    margin-bottom:10px;

}

.product-description{

    color:#666;

    font-size:14px;

    line-height:1.6;

    margin-bottom:20px;

    flex:1;

}


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

.product-actions{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:12px;

}


/* ===========================
   LOADING
=========================== */

.loading{

    text-align:center;

    padding:80px 20px;

}

.spinner{

    width:50px;

    height:50px;

    border:4px solid #ddd;

    border-top:4px solid var(--primary);

    border-radius:50%;

    margin:auto;

    animation:spin 1s linear infinite;

}

@keyframes spin{

    to{

        transform:rotate(360deg);

    }

}


/* ===========================
   EMPTY STATE
=========================== */

.empty-state{

    text-align:center;

    padding:100px 20px;

    color:#888;

}

.empty-state h2{

    font-size:28px;

}


/* ===========================
   SEARCH HIGHLIGHT
=========================== */

mark{

    background:#FFF3C0;

    padding:2px 4px;

    border-radius:4px;

}


/* ===========================
   HOVER OVERLAY
=========================== */

.product-image::after{

    content:"";

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.15);

    opacity:0;

    transition:.35s;

}

.product-card:hover .product-image::after{

    opacity:1;

}


/* ===========================
   WATCH VIDEO OVERLAY
=========================== */

.watch-overlay{

    position:absolute;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(0,0,0,.45);

    color:#fff;

    font-size:20px;

    font-weight:600;

    opacity:0;

    transition:.35s;

}

.product-card:hover .watch-overlay{

    opacity:1;

}


/* ===========================
   SMOOTH FADE
=========================== */

.fade-in{

    animation:fade .5s ease;

}

@keyframes fade{

    from{

        opacity:0;

        transform:translateY(15px);

    }

    to{

        opacity:1;

        transform:none;

    }

}