/* =========================================================
   AWTI DEVICES HUB
   STORES CSS
   File: assets/css/stores.css
   ========================================================= */


/* =========================================================
   STORE SECTION
   ========================================================= */

.awti-device-single .awti-store-prices{
    position:relative;

    margin:20px 0;
    padding:20px;

    border:1px solid rgba(37,99,235,.18);
    border-left:3px solid #16a34a;
    border-radius:18px;

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

    box-shadow:
        0 8px 28px rgba(15,23,42,.06);

    overflow:hidden;
}


/* =========================================================
   TOP ACCENT
   ========================================================= */

.awti-device-single .awti-store-prices::before{
    content:"";

    position:absolute;
    top:0;
    left:0;
    right:0;

    height:3px;

    background:
        linear-gradient(
            90deg,
            #16a34a,
            #0d9488,
            #2563eb
        );
}


/* =========================================================
   STORE HEADING
   ========================================================= */

.awti-device-single .awti-store-prices .awti-section-heading{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:16px;
    margin-bottom:16px;
}

.awti-device-single .awti-store-eyebrow{
    display:inline-block;

    margin-bottom:3px;

    color:#2563eb;

    font-size:12px;
    line-height:1.2;
    font-weight:900;

    letter-spacing:.08em;
}

.awti-device-single .awti-store-prices h2{
    margin:3px 0;

    color:#0f172a;

    font-size:22px;
    line-height:1.3;
    font-weight:800;
}

.awti-device-single .awti-store-prices .awti-section-heading p{
    margin:0;

    color:#64748b;

    font-size:13px;
}

.awti-device-single .awti-store-prices
.awti-section-heading > strong{
    white-space:nowrap;

    color:#475569;

    font-size:13px;
}


/* =========================================================
   STORE LIST
   ========================================================= */

.awti-device-single .awti-store-price-list{
    display:grid;
    gap:10px;
}


/* =========================================================
   STORE CARD / ROW
   ========================================================= */

.awti-device-single .awti-store-price-row{
    position:relative;

    display:grid;
    grid-template-columns:minmax(0,1fr) auto auto;
    align-items:center;

    gap:16px;

    padding:13px 14px;

    border:1px solid rgba(22,163,74,.16);
    border-left:3px solid #16a34a;
    border-radius:14px;

    background:
        linear-gradient(
            135deg,
            rgba(236,253,245,.85),
            rgba(255,255,255,.96),
            rgba(239,246,255,.85)
        );

    box-shadow:
        0 4px 14px rgba(15,23,42,.04);

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        border-color .2s ease;
}

.awti-device-single .awti-store-price-row:hover{
    transform:translateY(-1px);

    border-color:rgba(37,99,235,.28);

    box-shadow:
        0 8px 22px rgba(15,23,42,.08);
}


/* =========================================================
   STORE NAME
   ========================================================= */

.awti-device-single .awti-store-name{
    display:flex;
    align-items:center;

    gap:11px;
    min-width:0;
}

.awti-device-single .awti-store-name > div{
    min-width:0;
}

.awti-device-single .awti-store-name strong{
    display:block;

    color:#0f172a;

    font-size:14px;
    line-height:1.3;
    font-weight:800;
}


/* =========================================================
   STORE LOGO
   ========================================================= */

.awti-device-single .awti-store-logo{
    flex:0 0 auto;

    display:block;

    width:42px;
    height:42px;

    padding:5px;

    object-fit:contain;

    border:1px solid rgba(37,99,235,.12);
    border-radius:10px;

    background:#fff;

    box-shadow:
        0 3px 10px rgba(15,23,42,.05);
}


/* =========================================================
   LOGO PLACEHOLDER
   ========================================================= */

.awti-device-single .awti-store-logo-placeholder{
    flex:0 0 auto;

    display:flex;
    align-items:center;
    justify-content:center;

    width:42px;
    height:42px;

    border:1px solid rgba(22,163,74,.14);
    border-radius:10px;

    background:#fff;

    color:#16a34a;

    font-size:19px;
}


/* =========================================================
   STOCK
   ========================================================= */

.awti-device-single .awti-stock-in,
.awti-device-single .awti-stock-out{
    display:block;

    margin-top:3px;

    font-size:11px;
    line-height:1.3;
    font-weight:700;
}

.awti-device-single .awti-stock-in{
    color:#15803d;
}

.awti-device-single .awti-stock-out{
    color:#dc2626;
}


/* =========================================================
   PRICE
   ========================================================= */

.awti-device-single .awti-store-price{
    text-align:right;
}

.awti-device-single .awti-store-price strong{
    display:block;

    color:#2563eb;

    font-size:18px;
    line-height:1.2;
    font-weight:900;

    white-space:nowrap;
}

.awti-device-single .awti-store-price span{
    color:#64748b;

    font-size:12px;
}


/* =========================================================
   CHECK PRICE BUTTON
   ========================================================= */

.awti-device-single .awti-store-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-height:38px;
    padding:8px 13px;

    border:1px solid rgba(37,99,235,.15);
    border-radius:10px;

    background:
        linear-gradient(
            135deg,
            #16a34a,
            #0d9488,
            #2563eb
        );

    color:#fff;

    font-size:12px;
    line-height:1;
    font-weight:800;

    text-decoration:none;
    white-space:nowrap;

    box-shadow:
        0 5px 14px rgba(37,99,235,.16);

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        opacity .2s ease;
}

.awti-device-single .awti-store-button:hover{
    color:#fff;

    transform:translateY(-1px);

    opacity:.94;

    box-shadow:
        0 7px 18px rgba(37,99,235,.22);
}


/* =========================================================
   NOTE
   ========================================================= */

.awti-device-single .awti-store-note{
    margin:14px 0 0;
    padding-top:12px;

    border-top:1px solid rgba(37,99,235,.12);

    color:#64748b;

    font-size:11px;
    line-height:1.5;
}


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

@media(max-width:700px){

    .awti-device-single .awti-store-prices{
        margin:16px 0;
        padding:15px;

        border-radius:15px;
    }

    .awti-device-single .awti-store-prices
    .awti-section-heading{
        align-items:flex-start;
    }

    .awti-device-single .awti-store-prices h2{
        font-size:19px;
    }

    .awti-device-single .awti-store-price-row{
        grid-template-columns:minmax(0,1fr) auto;

        gap:10px;

        padding:12px;
    }

    .awti-device-single .awti-store-price{
        text-align:right;
    }

    .awti-device-single .awti-store-price strong{
        font-size:17px;
    }

    .awti-device-single .awti-store-button{
        grid-column:1 / -1;

        width:100%;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media(max-width:420px){

    .awti-device-single .awti-store-price-row{
        grid-template-columns:1fr;
    }

    .awti-device-single .awti-store-price{
        text-align:left;
    }

    .awti-device-single .awti-store-logo,
    .awti-device-single .awti-store-logo-placeholder{
        width:38px;
        height:38px;
    }

}