/*
==========================================================
UET Commerce Store Styling
==========================================================
*/


/*
----------------------------------------------------------
Store Container
----------------------------------------------------------
*/

.uet-store {

    width:100%;
    padding:40px 0;

}



/*
----------------------------------------------------------
Sections
----------------------------------------------------------
*/

.uet-store-section {

    margin-bottom:70px;

}


.uet-store-section h2 {

    color:#ffffff;
    font-size:32px;
    font-weight:700;
    margin-bottom:30px;

}



/*
----------------------------------------------------------
Hero
----------------------------------------------------------
*/

.uet-store-hero {

    position:relative;

    min-height:420px;

    display:flex;

    align-items:center;

    padding:60px;

    border-radius:28px;

    overflow:hidden;

    background:

    linear-gradient(
        135deg,
        rgba(0,174,239,0.25),
        rgba(255,79,216,0.25)
    ),

    #11151f;


    box-shadow:

    0 0 40px rgba(0,174,239,.15);


}



.uet-store-hero-content {

    max-width:650px;

}



.uet-store-tag {

    display:inline-block;

    color:#00aeef;

    font-size:14px;

    font-weight:700;

    letter-spacing:2px;

    margin-bottom:20px;

}



.uet-store-hero h1 {

    color:white;

    font-size:52px;

    line-height:1.1;

    margin-bottom:20px;

}



.uet-store-hero p {

    color:#b8c0d0;

    font-size:18px;

    line-height:1.6;

    margin-bottom:35px;

}



/*
----------------------------------------------------------
Buttons
----------------------------------------------------------
*/


.uet-store-actions {

    display:flex;

    gap:15px;

}



.uet-btn-primary,
.uet-btn-secondary {


    padding:14px 28px;

    border-radius:14px;

    text-decoration:none;

    font-weight:700;

    transition:.3s ease;

}



.uet-btn-primary {

    background:

    linear-gradient(
        90deg,
        #00aeef,
        #ff4fd8
    );

    color:white;

}



.uet-btn-primary:hover {

    transform:translateY(-3px);

    box-shadow:

    0 0 25px rgba(0,174,239,.5);

}



.uet-btn-secondary {

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

    color:white;

}



.uet-btn-secondary:hover {

    background:#171a23;

}



/*
----------------------------------------------------------
Category Grid
----------------------------------------------------------
*/


.uet-category-grid {

    display:grid;

    grid-template-columns:
    repeat(6,1fr);

    gap:20px;

}



.uet-category-card {


    background:#171a23;

    padding:35px 20px;

    border-radius:20px;

    text-align:center;

    color:white;

    font-weight:600;

    transition:.3s ease;


    border:

    1px solid rgba(255,255,255,.06);

}



.uet-category-card:hover {


    transform:translateY(-6px);


    box-shadow:

    0 0 25px rgba(0,174,239,.25);


}



/*
----------------------------------------------------------
Product Grid
----------------------------------------------------------
*/


.uet-product-grid {

    display:grid;

    grid-template-columns:
    repeat(4,1fr);

    gap:25px;

}



/*
----------------------------------------------------------
Product Card
----------------------------------------------------------
*/


.uet-product-card {


    background:#171a23;

    border-radius:24px;

    overflow:hidden;

    border:

    1px solid rgba(255,255,255,.06);


    transition:.3s ease;


}



.uet-product-card:hover {


    transform:translateY(-8px);


    box-shadow:

    0 0 35px rgba(0,174,239,.25);


}



.uet-product-image {


    height:220px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#0b0f17;


}



.uet-product-placeholder {


    font-size:70px;

}



.uet-product-content {


    padding:25px;


}



.uet-product-content h3 {


    color:white;

    font-size:20px;

    margin-bottom:10px;


}



.uet-product-content p {


    color:#b8c0d0;

    font-size:14px;

    line-height:1.5;

    min-height:45px;


}



.uet-product-footer {


    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-top:25px;


}



.uet-product-price {


    color:white;

    font-size:22px;

    font-weight:700;


}



.uet-product-button {


    background:

    linear-gradient(
        90deg,
        #00aeef,
        #ff4fd8
    );


    color:white;

    border:none;

    padding:10px 15px;

    border-radius:12px;

    font-weight:700;

    cursor:pointer;


}



/*
----------------------------------------------------------
Feature Cards
----------------------------------------------------------
*/


.uet-feature-grid {


    display:grid;

    grid-template-columns:
    repeat(4,1fr);

    gap:25px;


}



.uet-feature-card {


    background:#171a23;

    padding:30px;

    border-radius:22px;


    border:

    1px solid rgba(255,255,255,.06);


}



.uet-feature-card h3 {


    color:white;

    margin-top:15px;


}



.uet-feature-card p {


    color:#b8c0d0;


}



/*
----------------------------------------------------------
Mobile
----------------------------------------------------------
*/


@media(max-width:900px){


    .uet-product-grid {

        grid-template-columns:
        repeat(2,1fr);

    }


    .uet-category-grid {

        grid-template-columns:
        repeat(2,1fr);

    }


    .uet-feature-grid {

        grid-template-columns:
        repeat(1,1fr);

    }


    .uet-store-hero {

        padding:35px;

    }


    .uet-store-hero h1 {

        font-size:36px;

    }

}
/*
==========================================================
UET Commerce Hero
==========================================================
*/


.uet-commerce-hero {


    position:relative;

    min-height:520px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:70px;

    overflow:hidden;

    border-radius:32px;


    background:

    linear-gradient(
        120deg,
        rgba(11,15,23,.95),
        rgba(11,15,23,.55)
    ),

    linear-gradient(
        135deg,
        #00aeef,
        #ff4fd8
    );


    margin-bottom:80px;

}



.uet-commerce-hero-overlay {


    position:absolute;

    inset:0;


    background:

    radial-gradient(
        circle at top right,
        rgba(0,174,239,.35),
        transparent 40%
    ),

    radial-gradient(
        circle at bottom left,
        rgba(255,79,216,.25),
        transparent 40%
    );


}



.uet-commerce-hero-content {


    position:relative;

    z-index:2;

    max-width:700px;


}



.uet-commerce-hero-badge {


    display:inline-block;


    padding:8px 18px;


    border-radius:50px;


    background:

    rgba(255,255,255,.08);


    border:

    1px solid rgba(255,255,255,.15);


    color:#00aeef;


    font-weight:700;


    letter-spacing:2px;


    margin-bottom:25px;


}



.uet-commerce-hero h1 {


    color:white;


    font-size:58px;


    line-height:1.05;


    margin-bottom:25px;


}



.uet-commerce-hero p {


    color:#c5ccda;


    font-size:19px;


    line-height:1.7;


    margin-bottom:40px;


}



.uet-commerce-hero-actions {


    display:flex;

    gap:20px;


}



.uet-commerce-primary-button {


    padding:16px 32px;


    border-radius:16px;


    background:

    linear-gradient(
        90deg,
        #00aeef,
        #ff4fd8
    );


    color:white;


    font-weight:700;


    text-decoration:none;


    transition:.3s;


}



.uet-commerce-primary-button:hover {


    transform:translateY(-4px);


    box-shadow:

    0 0 30px rgba(0,174,239,.5);


}



.uet-commerce-secondary-button {


    padding:16px 32px;


    border-radius:16px;


    color:white;


    text-decoration:none;


    border:

    1px solid rgba(255,255,255,.2);


    transition:.3s;


}



.uet-commerce-secondary-button:hover {


    background:

    rgba(255,255,255,.08);


}



.uet-commerce-hero-side {


    position:relative;

    z-index:2;


}



.uet-commerce-feature-panel {


    width:260px;


    padding:35px;


    border-radius:28px;


    background:

    rgba(23,26,35,.85);


    backdrop-filter:blur(15px);


    border:

    1px solid rgba(255,255,255,.08);


    box-shadow:

    0 0 35px rgba(0,174,239,.25);


}



.uet-commerce-feature-panel span {


    font-size:50px;


}



.uet-commerce-feature-panel h3 {


    color:white;


}



.uet-commerce-feature-panel p {


    color:#b8c0d0;


    font-size:14px;


}
/*
==========================================================
UET Commerce Category Cards
==========================================================
*/


.uet-commerce-section {

    margin-bottom:80px;

}



.uet-commerce-section-header {

    margin-bottom:35px;

}



.uet-commerce-section-header h2 {

    color:white;

    font-size:34px;

    margin-bottom:10px;

}



.uet-commerce-section-header p {

    color:#b8c0d0;

    font-size:16px;

}



.uet-commerce-category-grid {


    display:grid;

    grid-template-columns:
    repeat(3,1fr);

    gap:25px;


}



.uet-commerce-category-card {


    position:relative;


    display:flex;


    align-items:center;


    gap:25px;


    padding:30px;


    min-height:140px;


    background:#171A23;


    border-radius:26px;


    border:

    1px solid rgba(255,255,255,.06);


    text-decoration:none;


    overflow:hidden;


    transition:.35s ease;


}



.uet-commerce-category-card::before {


    content:"";


    position:absolute;


    inset:0;


    background:

    linear-gradient(
        120deg,
        rgba(0,174,239,.18),
        rgba(255,79,216,.18)
    );


    opacity:0;


    transition:.35s ease;


}



.uet-commerce-category-card:hover {


    transform:translateY(-8px);


    box-shadow:

    0 0 35px rgba(0,174,239,.25);


}



.uet-commerce-category-card:hover::before {


    opacity:1;


}



.uet-commerce-category-icon {


    position:relative;


    z-index:1;


    font-size:48px;


}



.uet-commerce-category-content {


    position:relative;


    z-index:1;


}



.uet-commerce-category-content h3 {


    color:white;


    font-size:21px;


    margin-bottom:8px;


}



.uet-commerce-category-content p {


    color:#b8c0d0;


    font-size:14px;


    line-height:1.5;


}
/*
==========================================================
UET Commerce Product Cards
==========================================================
*/


.uet-product-grid {

    display:grid;

    grid-template-columns:
    repeat(4,1fr);

    gap:25px;

}



.uet-commerce-product-card {


    position:relative;


    background:#171A23;


    border-radius:28px;


    overflow:hidden;


    border:

    1px solid rgba(255,255,255,.06);


    transition:.35s ease;


}



.uet-commerce-product-card:hover {


    transform:translateY(-10px);


    box-shadow:

    0 0 40px rgba(0,174,239,.25);


}



.uet-product-badge {


    position:absolute;


    top:20px;


    left:20px;


    padding:7px 15px;


    border-radius:50px;


    background:

    linear-gradient(
        90deg,
        #00aeef,
        #ff4fd8
    );


    color:white;


    font-size:12px;


    font-weight:700;


    z-index:2;


}



.uet-product-wishlist {


    position:absolute;


    top:20px;


    right:20px;


    width:38px;


    height:38px;


    border-radius:50%;


    background:#0B0F17;


    border:none;


    color:white;


    font-size:20px;


    z-index:2;


}



.uet-product-image {


    height:240px;


    display:flex;


    align-items:center;


    justify-content:center;


    background:#0B0F17;


}



.uet-product-placeholder {


    font-size:80px;


}



.uet-product-body {


    padding:25px;


}



.uet-product-rating {


    color:#ffcc00;


    margin-bottom:10px;


}



.uet-product-body h3 {


    color:white;


    font-size:21px;


}



.uet-product-body p {


    color:#b8c0d0;


    font-size:14px;


}



.uet-product-pricing {


    margin:20px 0;


}



.uet-current-price {


    color:white;


    font-size:25px;


    font-weight:800;


}



.uet-old-price {


    color:#7f8798;


    text-decoration:line-through;


    margin-left:10px;


}



.uet-add-cart-button {


    width:100%;


    padding:14px;


    border:none;


    border-radius:15px;


    background:

    linear-gradient(
        90deg,
        #00aeef,
        #ff4fd8
    );


    color:white;


    font-weight:700;


}
/*
==========================================================
UET Commerce Section Header
==========================================================
*/


.uet-commerce-section-header {


    display:flex;


    justify-content:space-between;


    align-items:flex-end;


    margin-bottom:35px;


}



.uet-commerce-view-all {


    color:#00aeef;


    text-decoration:none;


    font-weight:700;


    transition:.3s;


}



.uet-commerce-view-all:hover {


    color:#ff4fd8;


}
/*
==========================================================
UET Commerce Feature Cards
==========================================================
*/


.uet-commerce-feature-grid {


    display:grid;


    grid-template-columns:
    repeat(4,1fr);


    gap:25px;


}



.uet-commerce-feature-card {


    background:#171A23;


    padding:35px;


    border-radius:26px;


    border:

    1px solid rgba(255,255,255,.06);


    transition:.35s ease;


}



.uet-commerce-feature-card:hover {


    transform:translateY(-8px);


    box-shadow:

    0 0 35px rgba(0,174,239,.25);


}



.uet-feature-icon {


    font-size:45px;


    margin-bottom:20px;


}



.uet-commerce-feature-card h3 {


    color:white;


    font-size:21px;


    margin-bottom:12px;


}



.uet-commerce-feature-card p {


    color:#b8c0d0;


    line-height:1.6;


    font-size:14px;


}
/*
==========================================================
UET Commerce CTA Banner
==========================================================
*/


.uet-commerce-cta {


    position:relative;


    padding:80px 60px;


    border-radius:32px;


    overflow:hidden;


    text-align:center;


    background:


    linear-gradient(
        135deg,
        rgba(0,174,239,.25),
        rgba(255,79,216,.25)
    ),


    #11151f;


    border:

    1px solid rgba(255,255,255,.08);


    margin-bottom:50px;


}



.uet-commerce-cta::before {


    content:"";


    position:absolute;


    inset:-100px;


    background:


    radial-gradient(
        circle,
        rgba(0,174,239,.25),
        transparent 60%
    );


}



.uet-commerce-cta-content {


    position:relative;


    z-index:2;


    max-width:700px;


    margin:auto;


}



.uet-commerce-cta-badge {


    display:inline-block;


    color:#00aeef;


    letter-spacing:2px;


    font-weight:700;


    margin-bottom:20px;


}



.uet-commerce-cta h2 {


    color:white;


    font-size:42px;


    margin-bottom:20px;


}



.uet-commerce-cta p {


    color:#b8c0d0;


    font-size:18px;


    line-height:1.6;


    margin-bottom:35px;


}
/*
==========================================================
UET Cart Button States
==========================================================
*/


.uet-add-cart-button {


    transition:.3s ease;


}



.uet-add-cart-button:hover {


    transform:translateY(-3px);


    box-shadow:

    0 0 20px rgba(0,174,239,.5);


}



.uet-add-cart-button.uet-cart-loading {


    opacity:.7;


    cursor:wait;


}