/*
========================================================
Silver  GDJ Newwest products slider — Layout & Styling
--------------------------------------------------------
Purpose:
Defines visual structure, spacing, hover effects,
arrow controls, and responsive behavior
for the Silver Auto Product Slider component.

Includes:
- Section spacing and title alignment
- Horizontal scroll track
- Product card layout
- Header-aligned navigation arrows
- Mobile responsiveness and touch optimization

Version: 1
========================================================
*/

/* =====================================
   Silver  GDJ Newwest products slider
   Clean • Header-aligned • Responsive
===================================== */

/* SECTION */

.sas-section {
    padding:5em 2em;
    background:#ffffff;
}

.sas-title {
    font-size:2em;
    text-align:center;
    margin-bottom: 0.5em;
}

/* WRAPPER */

.sas-wrapper {
    position:relative;
    padding:0 6em;
}

/* TRACK */

.sas-track {
    display:flex;
    gap:2em;
    overflow-x:auto;
    scroll-behavior:smooth;
    -webkit-overflow-scrolling:touch;
}

.sas-track::-webkit-scrollbar {
    display:none;
}

/* CARD */

.sas-card {
    flex:0 0 auto;
    width:18em;
    background:#f7f7f9;
    border-radius:1.5em;
    padding:1.5em;
    transition:transform 0.25s ease, box-shadow 0.25s ease;
}

.sas-card:hover {
    transform:translateY(-0.5em);
    box-shadow:0 0.75em 2em rgba(0,0,0,0.08);
}

.sas-card a {
    text-decoration:none;
    color:#000;
    display:block;
}

/* IMAGE */

.sas-card img {
    width:100%;
    border-radius:1em;
    margin-bottom:1em;
    height: 14em;
}

/* TITLE */

.sas-card h3 {
    font-size:1.1em;
    margin-bottom:0.6em;
    text-align:center;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

/* PRICE */

.sas-price {
    font-weight:600;
    text-align:center;
    font-size:1em;
}

.sas-price del {
    color:#777;
    margin-right:0.4em;
}

.sas-price ins {
    text-decoration:none;
}

/* =====================================
   ARROWS – MATCH HEADER .gdj-btn STYLE
===================================== */

.sas-arrow {
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:3em;
    height:3em;
    border-radius:50%;
    border:0.08em solid #135266;
    background:#ffffff;
    color:#135266;
    cursor:pointer;
    font-size:1.2em;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:0.25s ease;
    z-index:10;
}

.sas-arrow:hover {
    background:#135266;
    color:#ffffff;
}

.sas-left {
    left: 0em;
}

.sas-right {
    right: 0em;
}

/* =====================================
   MOBILE OPTIMIZATION
===================================== */

@media (max-width:450px){

    .sas-section {
        padding:3em 1em;
    }

    .sas-wrapper {
        padding:0 1em;
    }

    .sas-track {
        gap:1em;
    }

    .sas-card {
        width:75%;
        padding:1em;
        border-radius:1.25em;
    }

    .sas-card img {
        margin-bottom:0.6em;
        height: 12em;
    }

    .sas-card h3 {
        font-size:0.95em;
        margin-bottom:0.4em;
    }

    .sas-price {
        font-size:0.9em;
    }
}

@media (max-width:590px){ 
    .sas-arrow {
        display:none;
    }
}