/* =====================================================
   RASISALAi UNITED SPORT SHOP
===================================================== */

/* -----------------------------
   ROOT
----------------------------- */

:root{
    --navy:#061746;
    --blue:#0758bd;
    --sky:#11a9ec;
    --light:#f2f8ff;

    --radius:18px;
    --shadow:0 8px 25px rgba(20,70,130,.08);
    --transition:.25s;
}

/* -----------------------------
   RESET
----------------------------- */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:'Kanit',sans-serif;
    background:#f6faff;
    color:#102650;
}

a{
    text-decoration:none;
}

img{
    max-width:100%;
}

/* -----------------------------
   NAVBAR
----------------------------- */

.navbar-custom{
    background:rgba(255,255,255,.96);
    backdrop-filter:blur(12px);
    box-shadow:0 2px 18px rgba(0,40,100,.08);
}

.brand-logo{
    width:58px;
    height:58px;
    object-fit:contain;
}

.brand-name{
    font-weight:700;
    color:var(--navy);
    line-height:1.1;
}

.brand-name small{
    display:block;
    color:var(--blue);
    font-size:.70rem;
}

.navbar .nav-link{
    color:#29446f;
    font-weight:500;
}

.navbar .nav-link:hover{
    color:var(--blue);
}

.btn-login{
    border-radius:10px;
}

.btn-shop{
    background:linear-gradient(90deg,var(--blue),var(--sky));
    color:#fff;
    border:none;
}

/* -----------------------------
   HERO
----------------------------- */

.hero{
    min-height:620px;
    display:flex;
    align-items:center;

    background:
    radial-gradient(circle at 80% 25%,rgba(59,197,255,.55),transparent 25%),
    linear-gradient(120deg,#04133c,#073e92,#078fdb);

    color:#fff;
}

.hero-logo{
    max-width:420px;
    animation:float 3s ease infinite;
}

@keyframes float{

    0%,100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-10px);
    }

}

/* -----------------------------
   SECTION
----------------------------- */

.section{
    padding:80px 0;
}

.section-title{
    text-align:center;
    font-weight:700;
    color:var(--navy);
}

.section-sub{
    text-align:center;
    color:#6f85a8;
    margin-bottom:40px;
}

/* -----------------------------
   CATEGORY
----------------------------- */

.category-card{
    background:#fff;
    border-radius:18px;
    padding:25px;
    transition:.3s;
    box-shadow:var(--shadow);
    height:100%;
}

.category-card:hover{

    transform:translateY(-6px);

}

.category-icon{

    width:60px;
    height:60px;

    display:grid;
    place-items:center;

    margin:auto;

    border-radius:15px;

    background:#e9f4ff;

    color:var(--blue);

    font-size:26px;

    margin-bottom:15px;

}

/* -----------------------------
   PRODUCT
----------------------------- */

.product-card{

    background:#fff;

    border:none;

    border-radius:18px;

    overflow:hidden;

    box-shadow:var(--shadow);

    transition:.25s;

    height:100%;

}

.product-card:hover{

    transform:translateY(-5px);

}

.product-image{

    width:100%;

    height:260px;

    object-fit:cover;

    background:#eef6ff;

}

.product-body{

    padding:20px;

}

.product-title{

    font-weight:600;

    min-height:50px;

}

.price{

    font-size:1.3rem;

    color:var(--blue);

    font-weight:700;

}

/* -----------------------------
   PRODUCT DETAIL
----------------------------- */

.product-main-image{

    width:100%;

    height:520px;

    object-fit:cover;

    border-radius:20px;

    background:#fff;

    border:1px solid #e6eef8;

}

.product-thumbnails{

    display:flex;

    gap:12px;

    margin-top:20px;

    flex-wrap:wrap;

}

.product-thumb{

    width:90px;

    height:90px;

    object-fit:cover;

    border-radius:12px;

    cursor:pointer;

    border:2px solid transparent;

    transition:.2s;

}

.product-thumb:hover{

    border-color:var(--blue);

}

.product-thumb.active{

    border-color:var(--blue);

}

.size-list{

    display:flex;

    gap:12px;

    flex-wrap:wrap;

}

.size-item{

    cursor:pointer;

}

.size-item span{

    display:block;

    padding:10px 18px;

    border:1px solid #d8e6f7;

    border-radius:10px;

}

.size-item input:checked+span{

    background:var(--blue);

    color:#fff;

}

.quantity-box{

    display:flex;

    align-items:center;

    width:180px;

}

.quantity-box button{

    width:45px;

    height:45px;

    border:none;

    background:#edf5ff;

}

.quantity-box input{

    width:90px;

    text-align:center;

    border:1px solid #ddd;

    height:45px;

}

/* -----------------------------
   FOOTER
----------------------------- */

footer{

    background:#04133b;

    color:#c9def7;

    padding:60px 0 25px;

}

.footer-logo{

    width:70px;

}

/* -----------------------------
   MOBILE
----------------------------- */

@media(max-width:768px){

    .hero{

        min-height:auto;

        padding:80px 0;

    }

    .hero-logo{

        width:260px;

        margin-top:30px;

    }

    .product-main-image{

        height:320px;

    }

}
/* =====================================
   Nike Style Product Header
===================================== */

/* ==========================================
   PRODUCT HEADER
========================================== */
/* ===========================
   Product Header
=========================== */

.product-header{

    position:relative;

    overflow:hidden;

    padding:70px 0 50px;

    background:
    linear-gradient(
        135deg,
        #ffffff 0%,
        #f5faff 100%
    );

    border-bottom:1px solid #e7eef7;

}

/* วงกลมด้านหลัง */

.header-bg-circle{

    position:absolute;

    border-radius:50%;

    filter:blur(60px);

    opacity:.35;

}

.circle-1{

    width:260px;

    height:260px;

    background:#11a9ec;

    top:-120px;

    right:8%;

    animation:floatCircle 8s ease-in-out infinite;

}

.circle-2{

    width:220px;

    height:220px;

    background:#0758bd;

    left:-80px;

    bottom:-120px;

    animation:floatCircle2 10s ease-in-out infinite;

}

/* breadcrumb */

.nike-breadcrumb{

    display:flex;

    align-items:center;

    gap:10px;

    flex-wrap:wrap;

    margin-bottom:22px;

    font-size:14px;

}

.nike-breadcrumb a{

    color:#5d6d7e;

    text-decoration:none;

}

.nike-breadcrumb a:hover{

    color:#0758bd;

}

.nike-breadcrumb span{

    color:#b8c3cf;

}

.nike-breadcrumb .active{

    color:#111;

    font-weight:600;

}

/* badge */

.product-badge{

    display:inline-block;

    background:#0758bd;

    color:#fff;

    padding:8px 18px;

    border-radius:40px;

    font-size:14px;

    margin-bottom:18px;

    box-shadow:0 10px 25px rgba(7,88,189,.25);

}

/* title */

.product-page-title{

    font-size:clamp(2.2rem,5vw,3.8rem);

    font-weight:700;

    color:#111;

    margin-bottom:12px;

    letter-spacing:-1px;

}

/* sub */

.product-page-sub{

    color:#607183;

    font-size:17px;

}

.product-page-sub i{

    color:#11a9ec;

    margin-right:8px;

}

/* animation */

@keyframes floatCircle{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-20px);

    }

}

@keyframes floatCircle2{

    0%,100%{

        transform:translateX(0);

    }

    50%{

        transform:translateX(20px);

    }

}
.product-badge{

    display:inline-flex;
    align-items:center;
    gap:8px;

    padding:8px 18px;

    border-radius:50px;

    background:linear-gradient(135deg,#11A9EC,#0758BD);

    color:#fff;

    font-weight:600;

    margin-bottom:18px;

    box-shadow:0 8px 20px rgba(7,88,189,.25);

}

.product-page-sub{

    display:flex;

    flex-wrap:wrap;

    align-items:center;

    gap:14px;

    color:#6b7280;

    font-size:15px;

}

.product-page-sub span{

    display:flex;

    align-items:center;

    gap:6px;

}

.product-page-sub i{

    color:#0ea5e9;

}

.product-page-sub strong{

    color:#111827;

    font-weight:600;

}

.dot{

    color:#cbd5e1;

    font-size:18px;

}