*{box-sizing:border-box}body{margin:0;font-family:Inter,Arial,sans-serif;background:#f7f7f5;color:#1b1b1b}.topbar{height:72px;background:#fff;border-bottom:1px solid #e8e8e8;display:flex;align-items:center;justify-content:space-between;padding:0 6%;position:sticky;top:0;z-index:5}.brand{display:flex;gap:10px;align-items:center}.brand-mark{width:40px;height:40px;border-radius:12px;background:#171717;color:#fff;display:grid;place-items:center;font-size:22px}.brand small{display:block;color:#777;font-size:11px}.actions{display:flex;gap:10px}.actions button,.primary{border:0;border-radius:10px;padding:11px 16px;font-weight:700;cursor:pointer}.ghost{background:#f1f1ef}.cart,.primary{background:#171717;color:#fff}.cart span{background:#fff;color:#171717;border-radius:20px;padding:2px 7px;margin-left:5px}.hero{margin:32px auto;max-width:1200px;padding:50px;border-radius:28px;background:linear-gradient(120deg,#ece8df,#fff);display:flex;justify-content:space-between;align-items:center;gap:30px}.eyebrow{font-size:12px;letter-spacing:2px;color:#777;font-weight:800}.hero h1{font-size:clamp(38px,6vw,70px);line-height:.98;margin:12px 0}.hero p{color:#666}.hero-card{width:280px;height:220px;border-radius:24px;background:#171717;color:#fff;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:12px;font-size:28px}.hero-card b{font-size:12px;color:#bbb}.toolbar{max-width:1200px;margin:20px auto;display:flex;gap:12px}.toolbar input,.toolbar select,input,textarea{border:1px solid #ddd;border-radius:10px;padding:13px;background:#fff;font:inherit}.toolbar input{flex:1}.toolbar select{min-width:180px}.grid{max-width:1200px;margin:20px auto 60px;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px}.card{background:#fff;border:1px solid #e9e9e9;border-radius:18px;padding:16px}.pic{height:170px;border-radius:14px;background:#efeee9;display:grid;place-items:center;font-size:52px}.card h3{margin:14px 0 5px}.meta{color:#777;font-size:13px}.price{font-size:20px;font-weight:800;margin:10px 0}.full{width:100%}.modal{position:fixed;inset:0;background:#0008;display:grid;place-items:center;padding:18px;z-index:10}.hidden{display:none}.panel{background:#fff;width:min(520px,100%);max-height:90vh;overflow:auto;border-radius:20px;padding:22px}.wide{width:min(900px,100%)}.panel-head{display:flex;justify-content:space-between;align-items:center}.close{border:0;background:#eee;border-radius:50%;width:34px;height:34px;font-size:22px;cursor:pointer}.cart-row,.order-row,.admin-row{padding:12px 0;border-bottom:1px solid #eee;display:flex;justify-content:space-between;gap:12px}.qty button{border:1px solid #ddd;background:#fff;border-radius:6px;padding:4px 8px}.total{display:flex;justify-content:space-between;padding:18px 0;font-size:18px}form{display:grid;gap:12px}textarea{min-height:100px;resize:vertical}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:15px 0 25px}.stats div{background:#f5f5f2;border-radius:14px;padding:16px}.stats small,.stats b{display:block}.stats b{font-size:24px;margin-top:5px}.product-form{grid-template-columns:2fr 1fr 1fr 1.3fr auto}.status{padding:5px 8px;border-radius:7px;background:#eee;font-size:12px}.danger{border:0;background:#eee;padding:7px;border-radius:7px;cursor:pointer}.panel h3{margin-top:25px}#toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:#171717;color:#fff;padding:12px 18px;border-radius:10px;display:none;z-index:20}@media(max-width:700px){.hero{margin:15px;padding:30px;display:block}.hero-card{width:100%;height:140px;margin-top:25px}.toolbar{margin:15px;flex-direction:column}.grid{margin:15px}.product-form{grid-template-columns:1fr}.stats{grid-template-columns:1fr}.topbar{padding:0 15px}}

/* =========================================================
   CUSTOMER ADVERTISEMENTS
========================================================= */
.customer-ads{max-width:1200px;margin:22px auto 30px;padding:0 0}.customer-ad-frame{position:relative;height:300px;border-radius:22px;overflow:hidden;background:#171717;box-shadow:0 12px 35px rgba(0,0,0,.12)}.customer-ad-image{width:100%;height:100%;display:block;object-fit:cover}.customer-ad-overlay{position:absolute;left:0;right:0;bottom:0;padding:60px 65px 28px;background:linear-gradient(transparent,rgba(0,0,0,.78));color:#fff;pointer-events:none}.customer-ad-brand{font-size:11px;letter-spacing:2px;font-weight:800;opacity:.85}.customer-ad-overlay h2{margin:6px 0 0;font-size:clamp(22px,3vw,36px)}.ad-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:42px;height:42px;border:0;border-radius:50%;background:rgba(255,255,255,.9);color:#171717;font-size:30px;line-height:1;cursor:pointer;display:grid;place-items:center;box-shadow:0 4px 14px rgba(0,0,0,.2)}.ad-prev{left:18px}.ad-next{right:18px}.ad-nav:hover{background:#fff}.customer-ad-dots{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);display:flex;gap:7px;z-index:3}.customer-ad-dot{width:8px;height:8px;border-radius:50%;border:0;background:rgba(255,255,255,.55);padding:0;cursor:pointer}.customer-ad-dot.active{background:#fff;transform:scale(1.25)}
@media(max-width:700px){.customer-ads{margin:15px}.customer-ad-frame{height:220px;border-radius:18px}.customer-ad-overlay{padding:45px 48px 24px 48px}.ad-nav{width:36px;height:36px;font-size:25px}.ad-prev{left:10px}.ad-next{right:10px}}
.pic img{width:100%;height:100%;object-fit:contain;border-radius:14px;display:block}
/* =========================================================
   AMAZON-STYLE PRODUCT GRID
========================================================= */

.grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    align-items: stretch;
}


/* =========================================================
   PRODUCT CARD
========================================================= */

.product-card {
    position: relative;
    background: #fff;
    border: 1px solid #e3e7eb;
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-width: 0;
    transition:
            transform .18s ease,
            box-shadow .18s ease,
            border-color .18s ease;
}


.product-card:hover {
    transform: translateY(-3px);
    border-color: #cfd5db;
    box-shadow: 0 10px 28px rgba(0,0,0,.10);
}


/* =========================================================
   IMAGE AREA
========================================================= */

.product-image-box {
    position: relative;
    width: 100%;
    height: 245px;
    background: #f7f7f5;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}


.product-image-box img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    transition: transform .25s ease;
}


.product-card:hover .product-image-box img {
    transform: scale(1.035);
}


/* =========================================================
   IMAGE FALLBACK
========================================================= */

.product-image-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #707781;
    background: #f4f3ef;
}


.fallback-icon {
    width: 70px;
    height: 70px;
    border-radius: 18px;
    background: #fff;
    display: grid;
    place-items: center;
    font-size: 34px;
    box-shadow: 0 4px 16px rgba(0,0,0,.07);
}


.product-image-fallback span {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: #888;
}


/* =========================================================
   WISHLIST
========================================================= */

.wishlist-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 5;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid #e0e4e8;
    background: rgba(255,255,255,.95);
    color: #222;
    font-size: 23px;
    line-height: 1;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: .18s ease;
}


.wishlist-btn:hover {
    transform: scale(1.08);
}


.wishlist-btn.active {
    color: #c62828;
    border-color: #f0caca;
    background: #fff5f5;
}


/* =========================================================
   PRODUCT BADGES
========================================================= */

.product-badge {
    position: absolute;
    left: 12px;
    top: 12px;
    padding: 6px 9px;
    border-radius: 5px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .5px;
}


.product-badge.low {
    background: #fff3cd;
    color: #856404;
}


.product-badge.out {
    background: #f8d7da;
    color: #842029;
}


/* =========================================================
   PRODUCT INFORMATION
========================================================= */

.product-info {
    padding: 15px 16px 17px;
    display: flex;
    flex-direction: column;
    flex: 1;
}


.product-brand {
    color: #68727d;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .7px;
    margin-bottom: 6px;
}


.product-name {
    margin: 0;
    color: #15191d;
    font-size: 16px;
    line-height: 1.35;
    font-weight: 700;
    min-height: 43px;
}


.product-category {
    color: #737d87;
    font-size: 12px;
    margin-top: 5px;
}


/* =========================================================
   RATING
========================================================= */

.product-rating {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 9px;
    min-height: 20px;
}


.stars {
    color: #f5a623;
    font-size: 14px;
    letter-spacing: 0;
}


.rating-number {
    color: #444;
    font-size: 12px;
    font-weight: 700;
}


.review-count {
    color: #727b84;
    font-size: 11px;
}


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

.product-price {
    margin-top: 10px;
    color: #111;
    font-size: 23px;
    line-height: 1;
    font-weight: 800;
}


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

.stock-status {
    margin-top: 8px;
    min-height: 17px;
    font-size: 11px;
    font-weight: 600;
}


.stock-status.available {
    color: #16803c;
}


.stock-status.unavailable {
    color: #b42318;
}


/* =========================================================
   ADD TO CART
========================================================= */

.product-cart-btn {
    width: 100%;
    margin-top: 13px;
    min-height: 42px;
    border: 0;
    border-radius: 8px;
    background: #111;
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    transition: background .18s ease;
}


.product-cart-btn:hover:not(:disabled) {
    background: #292929;
}


.product-cart-btn:disabled {
    background: #c9cdd1;
    color: #fff;
    cursor: not-allowed;
}


/* =========================================================
   NO PRODUCTS
========================================================= */

.no-products {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    background: #fff;
    border: 1px solid #e3e7eb;
    border-radius: 14px;
}


.no-products-icon {
    font-size: 40px;
    margin-bottom: 10px;
}


.no-products h3 {
    margin: 0 0 6px;
}


.no-products p {
    margin: 0;
    color: #707985;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

    .grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

}


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

@media (max-width: 760px) {

    .grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 10px;
    }


    .product-image-box {
        height: 190px;
    }


    .product-info {
        padding: 12px;
    }


    .product-name {
        font-size: 14px;
        min-height: 38px;
    }


    .product-price {
        font-size: 20px;
    }


    .product-cart-btn {
        min-height: 40px;
        font-size: 12px;
    }


    .wishlist-btn {
        width: 34px;
        height: 34px;
        font-size: 20px;
        top: 8px;
        right: 8px;
    }

}


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

@media (max-width: 430px) {

    .grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }


    .product-image-box {
        height: 165px;
    }


    .product-info {
        padding: 10px;
    }


    .product-brand {
        font-size: 9px;
    }


    .product-name {
        font-size: 13px;
        line-height: 1.3;
        min-height: 34px;
    }


    .product-category {
        font-size: 10px;
    }


    .stars {
        font-size: 11px;
    }


    .rating-number,
    .review-count {
        font-size: 9px;
    }


    .product-price {
        font-size: 18px;
    }


    .stock-status {
        font-size: 9px;
    }


    .product-cart-btn {
        font-size: 11px;
        min-height: 37px;
        padding: 8px 5px;
    }

}