*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family: 'Arial', sans-serif;
}

body{
    background:#fff;
    color:#111;
}

.container{
    max-width:1200px;
    margin:auto;
    padding:40px 20px;
}

.product-wrapper{
    display:flex;
    gap:50px;
}

/* LEFT SIDE */
.left{
    display:flex;
    gap:20px;
    flex:1;
}

.thumbnails{
    display:flex;
    flex-direction:column;
    gap:5px;
}

.thumbnails img{
    width:150px;
    height:200px;
    object-fit:cover;
    cursor:pointer;

    padding:4px;
    transition:0.3s;
}

.thumbnails img:hover{
    border:1px solid #000;
}

.main-image{
    width:500px;
}

.swiper{
    width:100%;
    height:650px;
}

.swiper-slide img{
    width:100%;
    height:100%;
    object-fit:cover;
}

/* RIGHT SIDE */
.right{
    flex:1;
    max-width:500px;
}

.breadcrumb{
    font-size:8px;
    letter-spacing:1px;
    color:#777;
    margin-bottom:12px;
}

.title{
    font-size:22px;
    letter-spacing:2px;
    margin-bottom:15px;
    font-family: roboto!important;
}

.brand{
    font-size:8px;
    letter-spacing:2px;
    color:#555;
    margin-bottom:20px;
}

.price{
    font-size:28px;
    margin-bottom:30px;
}

.option-title{
    font-weight:bold;
    margin-bottom:10px;
}

.colors{
    display:flex;
    gap:15px;
    margin-bottom:25px;
}

.color{
    width:35px;
    height:35px;
    border-radius:50%;
    border:1px solid #ccc;
    cursor:pointer;
}

.color.white{ background:#fff; }
.color.red{ background:#7b0000; }

.sizes{
    display:flex;
    gap:20px;
    margin-bottom:30px;
}

.size{
    padding:12px 30px;
    border:1px solid #000;
    cursor:pointer;
    font-size:14px;
    transition:0.3s;
}

.size.active{
    background:#000;
    color:#fff;
}

.accordion{
    border-top:1px solid #ddd;
}

.accordion-item{
    border-bottom:1px solid #ddd;
}

.accordion-header{
    display:flex;
    justify-content:space-between;
    padding:18px 0;
    cursor:pointer;
    font-weight:bold;
}

.accordion-content{
    max-height:0;
    overflow:hidden;
    transition:0.3s ease;
    font-size:14px;
    color:#555;
    padding-right:20px;
}

.accordion-content.open{
    padding-bottom:35px;
}

button{
    width:100%;
    background:#0b0033;
    color:#fff;
    padding:18px;
    border:none;
    margin-top:30px;
    font-size:14px;
    letter-spacing:2px;
    cursor:pointer;
}

/* RESPONSIVE */
@media(max-width:1024px){
    .product-wrapper{
        flex-direction:column;
    }

    .left{
        justify-content:center;
    }

    .main-image{
        width:100%;
    }

    .swiper{
        height:500px;
    }
}

@media(max-width:600px){

    .product-wrapper{
        flex-direction:column;
        gap: 30px!important;
    }

    .left{
        flex-direction:column;   /* stack main + thumbs */
        align-items:center;
        gap: 8px!important;
    }

    .main-image{
        width:100%;
    }

    .swiper{
        height:380px;
    }

    /* Thumbnails below main image in grid */
    .thumbnails{
        order:2;                 /* move below main image */
        display:grid;
        grid-template-columns:repeat(3, 1fr);
        gap:3px;
        width:100%;
        margin-top:0px;
    }

    .thumbnails img{
        width:100%;
        height:90px;
    }

    .title{
        font-size:22px;
    }

    .price{
        font-size:20px;
    }

    .sizes{
        flex-wrap:wrap;
        gap:10px;
    }
    
    .product-wrapper{
        flex-direction:column;
        position:relative;
        padding-top:35px; /* space for breadcrumb */
    }

    .breadcrumb{
        position:absolute;
        top:0;
        left:0;
        width:100%;
        font-size:10px;
    }
}

.swiper-button-next,
.swiper-button-prev {
    width: 30px;             /* small circle */
    height: 30px;
    background: #fff;         /* white circle */
    border-radius: 50%;       /* make it round */
    color: #000;              /* arrow color */
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2); /* subtle shadow */
    top: 50%;                 /* vertically center */
    transform: translateY(-50%);
}

.swiper-button-next::after,
.swiper-button-prev::after {
    font-size: 14px;           /* make arrow smaller */
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
    background: #fff;          /* keep circle white on hover */
    color: #000;               /* arrow stays black */
}


/* thumbnails nav icons */

/* Inline nav under thumbnails, desktop only */
/* Thumbnails nav styling */
.thumbnails-nav {
    display: flex;
    justify-content: center;
    margin-top: 6px;
    gap: 30px;
}

.thumbnails-nav span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    font-size: 10px; /* size of the Font Awesome icon */
    color: #ccc;
    border: 1px solid #ccc;
    border-radius: 50%;
    cursor: pointer;
    transition: 0.3s;
}

.thumbnails-nav span:hover {
    background: #000;
    color: #fff;
}

@media(max-width: 768px){
    .thumbnails-nav {
        display: none; /* hide on mobile */
    }
    
    
    /* size selector design for mobile view */
    
    /* Container for smooth horizontal scroll on mobile */
    .size-wrapper {
        display: flex;
        gap: 12px;                 /* space between current size and sizes */
        overflow-x: auto;           /* enable horizontal scroll */
        -webkit-overflow-scrolling: touch; /* smooth scroll on iOS */
        scrollbar-width: none;      /* hide scrollbar Firefox */
        align-items: center;        /* vertical align */
        white-space: nowrap;        /* keep in one line */
        margin-bottom: 30px;
    }

    /* Hide scrollbar for Chrome, Edge, Safari */
    .size-wrapper::-webkit-scrollbar {
        display: none;
    }

    .sizes {
        display: flex;
        gap: 12px;
        flex: 0 0 auto; /* prevent shrinking */
    }

    .size {
        flex: 0 0 auto;
        padding: 12px 30px;
        border: 1px solid #000;
        cursor: pointer;
        font-size: 14px;
        transition: 0.3s;
        white-space: nowrap;
    }

    .size.active {
        background: #000;
        color: #fff;
    }

    .option-title.current-size {
        flex: 0 0 auto;
        font-weight: 500;
    }
    
    /* ending size selector */
    
}