/* JOS SHOP GRID */

body .jos-shop-grid {

    display:grid !important;

    grid-template-columns:repeat(3, 1fr) !important;

    gap:30px !important;

    width:100% !important;

    margin:40px auto !important;

}


body .jos-product-card {

    background:#fff;

    border-radius:20px;

    overflow:hidden;

    border:1px solid #ddd;

    box-shadow:0 8px 25px rgba(0,0,0,.12);

}



body .jos-product-image {

    width:100%;

    height:350px;

    overflow:hidden;

}



body .jos-product-image img {

    width:100% !important;

    height:100% !important;

    object-fit:cover !important;

}



body .jos-product-content {

    padding:25px;

    text-align:center;

}



body .jos-product-content h3 {

    font-size:26px;

    margin-bottom:15px;

}



body .jos-price {

    font-size:22px;

    font-weight:bold;

}



body .jos-view-button {

    display:inline-block;

    margin-top:20px;

    padding:14px 35px;

    background:#111;

    color:white !important;

    border-radius:10px;

    text-decoration:none !important;

}



/* SINGLE PRODUCT */


body .jos-single-product {

    display:grid !important;

    grid-template-columns:1fr 1fr !important;

    gap:50px;

    padding:40px 0;

}



body .jos-single-image img {

    width:100% !important;

    border-radius:25px;

    box-shadow:0 10px 30px rgba(0,0,0,.15);

}



body .jos-single-details {

    background:#fff;

    padding:35px;

    border-radius:20px;

    box-shadow:0 10px 30px rgba(0,0,0,.10);

}



body .jos-single-details h1 {

    font-size:42px;

}



body .jos-single-details h2 {

    font-size:30px;

}



body .jos-single-details input,

body .jos-single-details select {

    width:100%;

    padding:15px;

    border-radius:10px;

    border:1px solid #ddd;

    margin-bottom:15px;

}



body .jos-cart-button {

    width:100%;

    padding:16px;

    background:#111;

    color:white;

    border:0;

    border-radius:12px;

    font-size:18px;

}



/* TABLET */

@media(max-width:900px){

body .jos-shop-grid {

    grid-template-columns:repeat(2,1fr) !important;

}


body .jos-single-product {

    grid-template-columns:1fr !important;

}

}



/* MOBILE */

@media(max-width:600px){


body .jos-shop-grid {

    grid-template-columns:1fr !important;

}


body .jos-single-details h1 {

    font-size:30px;

}

}

/* =====================================
   Back to Shop Button
===================================== */

.jos-back-shop{

    margin:20px 0 30px;

}

.jos-back-button{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:12px 22px;

    background:#f5f5f5;

    color:#222 !important;

    text-decoration:none !important;

    border:1px solid #ddd;

    border-radius:8px;

    font-weight:600;

    transition:all .3s ease;

}

.jos-back-button:hover{

    background:#111;

    color:#fff !important;

    border-color:#111;

}

.jos-success{

    background:#d4edda;

    color:#155724;

    padding:15px;

    border-radius:8px;

    margin-bottom:20px;

    border:1px solid #c3e6cb;

}

/* ==========================
   CART PAGE
========================== */

.jos-cart-page{

    margin:40px 0;

}

.jos-cart-table{

    width:100%;

    border-collapse:collapse;

    margin-bottom:30px;

}

.jos-cart-table th{

    background:#111;

    color:#fff;

    padding:15px;

    text-align:left;

}

.jos-cart-table td{

    border:1px solid #ddd;

    padding:15px;

}

.jos-cart-total{

    text-align:right;

    font-size:24px;

    font-weight:bold;

}

@media(max-width:768px){

.jos-cart-table{

display:block;

overflow-x:auto;

white-space:nowrap;

}

}

/* ======================
CHECKOUT
====================== */

.jos-checkout{

max-width:700px;

margin:40px auto;

background:#fff;

padding:30px;

border-radius:15px;

box-shadow:0 5px 20px rgba(0,0,0,.08);

}

.jos-checkout p{

margin-bottom:20px;

}

.jos-checkout label{

display:block;

font-weight:bold;

margin-bottom:8px;

}

.jos-checkout input,
.jos-checkout textarea{

width:100%;

padding:14px;

border:1px solid #ddd;

border-radius:8px;

font-size:16px;

}

/* ==========================
   RECEIPT
========================== */

.jos-receipt{

    max-width:900px;

    margin:40px auto;

    background:#fff;

    padding:30px;

    border-radius:15px;

    box-shadow:0 5px 20px rgba(0,0,0,.08);

}

.jos-receipt-table{

    width:100%;

    border-collapse:collapse;

    margin:30px 0;

}

.jos-receipt-table th{

    background:#111;

    color:#fff;

    padding:12px;

}

.jos-receipt-table td{

    border:1px solid #ddd;

    padding:12px;

}

@media print{

    .site-header,
    .site-footer,
    .jos-cart-button{

        display:none !important;

    }

    .jos-receipt{

        box-shadow:none;

        margin:0;

    }
}
/* ==========================
   ORDER LOOKUP
========================== */

.jos-order-lookup{

    max-width:900px;

    margin:40px auto;

    background:#fff;

    padding:30px;

    border-radius:12px;

    box-shadow:0 3px 12px rgba(0,0,0,.08);

}

.jos-order-lookup form{

    display:flex;

    gap:15px;

    margin:20px 0;

    flex-wrap:wrap;

}

.jos-order-lookup input{

    flex:1;

    min-width:220px;

    padding:12px;

    border:1px solid #ddd;

    border-radius:6px;

}

.jos-order-lookup button{

    padding:12px 25px;

    background:#0073aa;

    color:#fff;

    border:none;

    border-radius:6px;

    cursor:pointer;

}

.jos-order-lookup button:hover{

    background:#005177;

}

.jos-lookup-table{

    width:100%;

    border-collapse:collapse;

    margin-top:25px;

}

.jos-lookup-table th{

    background:#0073aa;

    color:#fff;

    padding:12px;

}

.jos-lookup-table td{

    padding:12px;

    border:1px solid #ddd;

}

@media(max-width:768px){

    .jos-order-lookup form{

        flex-direction:column;

    }

}

/* ==========================
   Bank Details
========================== */

/* Copy Fields */

.jos-copy-field{

    display:flex;

    align-items:center;

    gap:10px;

    margin-top:8px;

}

.jos-copy-field input{

    flex:1;

    height:42px;

    padding:0 12px;

    border:1px solid #dcdcde;

    border-radius:6px;

    background:#fff;

    font-size:16px;

    font-weight:600;

    color:#333;

}

.jos-copy-btn{

    width:42px;

    height:42px;

    border:none;

    border-radius:6px;

    background:#2271b1;

    color:#fff;

    cursor:pointer;

    font-size:18px;

}

.jos-copy-btn:hover{

    background:#135e96;

}

/* ===================================
   Mobile Responsive Spacing
=================================== */

@media (max-width: 768px) {

    .jos-container,
    .jos-shop,
    .jos-product,
    .jos-cart,
    .jos-checkout,
    .jos-order-lookup,
    .jos-receipt {

        width: 100%;
        box-sizing: border-box;
        padding-left: 15px;
        padding-right: 15px;

    }

}