* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

:root {
    --main-color: #fd4646;
    --text-color: #171427;
    --bg-color: #fff;
}

body { color: var(--text-color); }
.container { max-width: 1060px; margin: auto; width: 100%; padding: 0 1.5rem; }

header { position: fixed; top: 0; left: 0; width: 100%; background: var(--bg-color); box-shadow: 0 1px 4px rgba(0,0,0,0.1); z-index: 100; }
.nav { display: flex; align-items: center; justify-content: space-between; padding: 20px 0; }
.logo { font-size: 1.1rem; font-weight: 700; text-decoration: none; color: var(--text-color); text-transform: uppercase; }

.cart-icon { position: relative; cursor: pointer; font-size: 1.8rem; }
#cart-count { position: absolute; top: -5px; right: -10px; background: var(--main-color); color: #fff; padding: 2px 5px; border-radius: 50%; font-size: 0.7rem; }

.shop { margin-top: 5rem; }
.section-title { font-size: 1.5rem; font-weight: 600; text-align: center; margin-bottom: 1.5rem; }
.shop-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; }

/* Product Box */
.product-box { padding: 10px; border: 1px solid #eee; transition: 0.3s; border-radius: 8px; position: relative; }
.product-box:hover { border: 1px solid var(--text-color); }
.product-img { width: 100%; height: 200px; object-fit: contain; background: #f9f9f9; margin-bottom: 0.5rem; border-radius: 5px; }
.product-title { font-size: 1.1rem; font-weight: 600; text-transform: uppercase; margin-bottom: 0.5rem; }
.price { font-weight: 500; color: var(--main-color); }
.add-cart { position: absolute; bottom: 10px; right: 10px; background: var(--text-color); color: #fff; padding: 10px; cursor: pointer; border-radius: 50%; }

/* Cart Sidebar */
.cart { position: fixed; top: 0; right: -100%; width: 360px; height: 100vh; background: var(--bg-color); padding: 20px; box-shadow: -2px 0 4px rgba(0,0,0,0.1); transition: 0.3s; z-index: 101; overflow-y: auto; }
.cart.active { right: 0; }
.cart-title { text-align: center; font-size: 1.5rem; font-weight: 600; margin-top: 2rem; }
.cart-box { display: grid; grid-template-columns: 32% 50% 18%; align-items: center; gap: 1rem; margin-top: 1rem; border-bottom: 1px solid #eee; padding-bottom: 10px; }
.cart-img { width: 100px; height: 100px; object-fit: contain; padding: 10px; }
.detail-box { display: grid; row-gap: 0.5rem; }
.cart-product-title { font-size: 1rem; text-transform: uppercase; }
.cart-price { font-weight: 500; }
.cart-quantity { border: 1px solid var(--text-color); outline-color: var(--main-color); width: 2.4rem; text-align: center; }
.cart-remove { font-size: 24px; color: var(--main-color); cursor: pointer; }
.total { display: flex; justify-content: flex-end; margin-top: 1.5rem; border-top: 1px solid var(--text-color); padding-top: 10px; }
.total-title { font-size: 1rem; font-weight: 600; margin-right: 1rem; }
.btn-buy { display: flex; margin: 1.5rem auto 0 auto; padding: 12px 20px; border: none; background: var(--main-color); color: #fff; font-size: 1rem; font-weight: 500; cursor: pointer; width: 100%; }
#close-cart { position: absolute; top: 1rem; right: 0.8rem; font-size: 2rem; color: var(--text-color); cursor: pointer; }