/* home page slider  */

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

.product-slider{
--ink:#131313;
--bg:#f5f2ee;
--accent:#3876ad;
--muted:#888080;
--white:#ffffff;
--r:18px;
--dur:640ms;
font-family:'DM Sans',sans-serif;
background:#131313;
color:var(--ink);
padding:40px 0;
}



/* HEADER */

.product-slider .hdr{
text-align:center;
padding-bottom:20px;
}

.product-slider .eye{
display:block;
font-size:10px;
letter-spacing:.28em;
text-transform:uppercase;
color:var(--accent);
margin-bottom:5px;
}

.product-slider h1{
font-family:'Cormorant Garamond',serif;
font-size:36px;
font-weight:300;
}

/* SHELL */

.product-slider .shell{
width:min(1080px,96vw);
margin:auto;
display:flex;
align-items:center;
gap:15px;
}

/* VIEWPORT */

.product-slider .vp{
flex:1;
height:420px;
overflow:hidden;
border-radius:var(--r);
}

/* TRACK */

.product-slider .track{
display:flex;
flex-direction:column;
transition:transform var(--dur) cubic-bezier(.77,0,.18,1);
}

/* SLIDE */

.product-slider .slide{
display:flex;
background:#fff;
border-radius:var(--r);
overflow:hidden;
box-shadow:0 16px 52px rgba(0,0,0,.09);
flex-shrink:0;
height:420px;
}

.product-slider .slide:nth-child(even){
flex-direction:row-reverse;
}

/* IMAGE */

.product-slider .s-img{
width:45%;
position:relative;
overflow:hidden;
}

.product-slider .s-img img{
width:100%;
height:100%;
object-fit:cover;
}

/* CONTENT */

.product-slider .s-body{
flex:1;
padding:40px;
display:flex;
flex-direction:column;
justify-content:center;
gap:10px;
}

.product-slider .cat{
font-size:11px;
letter-spacing:.22em;
text-transform:uppercase;
color:var(--accent);
}

.product-slider .ttl{
font-family: 'Roboto';
    font-size: 30px;
    font-weight: 500;
}

.product-slider .bar{
width:30px;
height:2px;
background:#3876ad !important;
}

.product-slider .dsc{
font-size:14px;
line-height:1.7;
color:var(--muted);
}

.product-slider .prc{
font-family:'Cormorant Garamond',serif;
font-size:22px;
font-weight:700;
}

.product-slider .btn{
display:inline-flex;
align-items:center;
gap:6px;
padding:10px 20px;
background:#3876ad;
color:#fff;
font-size:12px;
letter-spacing:.1em;
text-transform:uppercase;
text-decoration:none;
border-radius:50px;
margin-top: 25px;
}

/* CONTROLS */

.product-slider .controls{
display:flex;
flex-direction:column;
gap:10px;
align-items:center;
}

.product-slider .arr{
width:40px;
height:40px;
border-radius:50%;
background:#fff;
border:none;
cursor:pointer;
box-shadow:0 3px 12px rgba(0,0,0,.1);
display:grid;
place-items:center;
}

.product-slider .dots{
display:flex;
flex-direction:column;
gap:6px;
}

.product-slider .dot{
width:6px;
height:6px;
border-radius:50%;
background:#888;
opacity:.3;
border:none;
cursor:pointer;
}

.product-slider .dot.on{
opacity:1;
background:#3876ad;;
transform:scale(1.6);
}
/* MOBILE FIX */

@media (max-width:600px){

.product-slider .hdr{
padding:20px 15px 10px;
}

.product-slider .hdr h1{
font-size:22px;
}

/* shell */
.product-slider .shell{
flex-direction:column;
gap:10px;
width:100%;
padding:0 10px;
}

/* viewport */
.product-slider .vp{
width:100%;
overflow-x:auto;
overflow-y:hidden;
scroll-snap-type:x mandatory;
-webkit-overflow-scrolling:touch;
display:flex;
}

/* hide scrollbar */
.product-slider .vp::-webkit-scrollbar{
display:none;
}

/* track horizontal */
.product-slider .track{
flex-direction:row !important;
transform:none !important;
transition:none !important;
width:auto;
}

/* slide */
.product-slider .slide{
flex-direction:column !important;
min-width:100%;
height:auto;
scroll-snap-align:start;
}

.product-slider .slide:nth-child(even){
flex-direction:column !important;
}

/* image */
.product-slider .s-img{
width:100% !important;
height:200px;
}

.product-slider .s-img img{
width:100%;
height:100%;
object-fit:cover;
position:relative;
}

/* content */
.product-slider .s-body{
padding:20px;
}

.product-slider .ttl{
font-size:20px;
}

.product-slider .dsc{
font-size:13px;
line-height:1.6;
}

/* button */
.product-slider .btn{
font-size:11px;
padding:8px 16px;
}

/* controls */
.product-slider .controls{
flex-direction:row;
justify-content:center;
gap:12px;
margin-top:10px;
}

.product-slider .dots{
flex-direction:row;
gap:6px;
}

/* arrows rotate */
.product-slider #prev{
transform:rotate(-90deg);
}

.product-slider #next{
transform:rotate(90deg);
}

}

@media (max-width: 600px) {
    .product-slider .track {
        width: 100%;
    }
}

@media (max-width: 600px) {
    .product-slider .slide {
        flex-direction: column !important;
        min-width: 100%;
        height: auto;
        scroll-snap-align: start;
        width: 100%;
    }
}

.product-slider .btn
 {
    width: 25%;
    color: white !important;
}
@media (max-width: 1024px){
    .product-slider .btn {
    width: 30%;
}
}

@media (max-width: 650px) {
    .product-slider .btn {
        width: 40%;
    }
}

[type=button]:focus, 
[type=button]:hover, 
[type=submit]:focus, 
[type=submit]:hover, 
button:focus, 
button:hover{
    background-color: #F3701E !important;
    color: #fff !important;
}