* { box-sizing: border-box; margin: 0; padding: 0; }
body { background:#0b0b0b; color:#fff; font-family:Arial,Helvetica,sans-serif; min-height:100vh; }
button,input { font-family:inherit; }
button { border:none; cursor:pointer; }
.app { width:100%; max-width:600px; margin:0 auto; min-height:100vh; padding-bottom:90px; }
.header { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 18px; border-bottom:1px solid #202020; }
.logo { font-size:24px; font-weight:900; letter-spacing:4px; }
.profile-button { width:40px; height:40px; border-radius:50%; background:#181818; color:white; font-size:21px; }
.screen { display:none; padding:20px 16px; }
.screen.active { display:block; }
.welcome { margin-top:10px; margin-bottom:22px; }
.welcome h1 { font-size:30px; margin-bottom:7px; }
.welcome p { color:#858585; font-size:14px; }
.search-box { height:48px; display:flex; align-items:center; gap:10px; padding:0 15px; background:#171717; border:1px solid #262626; border-radius:14px; margin-bottom:28px; }
.search-box input { flex:1; border:none; outline:none; background:transparent; color:white; font-size:15px; }
.search-box input::placeholder { color:#707070; }
.section-title { display:flex; justify-content:space-between; align-items:center; margin-bottom:13px; }
.section-title h2 { font-size:19px; }
.categories { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-bottom:30px; }
.category { min-height:90px; background:#151515; border:1px solid #242424; border-radius:14px; color:white; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; font-size:24px; }
.category span { font-size:12px; color:#bdbdbd; }
.products-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.product-card { background:#151515; border-radius:15px; overflow:hidden; border:1px solid #242424; cursor:pointer; }
.product-image { width:100%; aspect-ratio:.78; overflow:hidden; background:#202020; }
.product-image img { width:100%; height:100%; display:block; object-fit:cover; }
.product-info { padding:12px; }
.product-brand { color:#777; font-size:11px; text-transform:uppercase; margin-bottom:4px; }
.product-name { font-size:14px; line-height:1.25; margin-bottom:10px; }
.product-bottom { display:flex; justify-content:space-between; align-items:center; }
.product-price { font-size:15px; font-weight:700; }
.product-new { font-size:9px; background:white; color:black; padding:4px 6px; border-radius:5px; font-weight:700; }
.screen-title { display:flex; align-items:center; gap:12px; margin-bottom:20px; }
.screen-title h1 { font-size:24px; }
.back-button { width:38px; height:38px; border-radius:50%; background:#181818; color:white; font-size:20px; }
.catalog-filters { display:flex; gap:8px; overflow-x:auto; margin-bottom:20px; scrollbar-width:none; }
.catalog-filters::-webkit-scrollbar { display:none; }
.filter { flex-shrink:0; background:#171717; color:#999; border:1px solid #292929; border-radius:20px; padding:9px 15px; }
.filter.active { background:white; color:black; border-color:white; }
.product-gallery { width:100%; aspect-ratio:.85; overflow:hidden; border-radius:18px; background:#202020; margin-bottom:10px; touch-action:pan-y; position:relative; }
.product-gallery img { width:100%; height:100%; display:block; object-fit:cover; user-select:none; -webkit-user-drag:none; }
.gallery-counter { position:absolute; top:12px; right:12px; background:rgba(0,0,0,.65); padding:6px 9px; border-radius:14px; font-size:11px; }
.product-thumbnails { display:flex; gap:8px; overflow-x:auto; margin-bottom:22px; scrollbar-width:none; }
.product-thumbnails::-webkit-scrollbar { display:none; }
.thumbnail { flex-shrink:0; width:62px; height:75px; padding:0; overflow:hidden; border:2px solid transparent; border-radius:10px; background:#202020; }
.thumbnail.selected { border-color:white; }
.thumbnail img { width:100%; height:100%; display:block; object-fit:cover; }
.product-page-brand { color:#777; font-size:12px; text-transform:uppercase; margin-bottom:6px; }
.product-page-name { font-size:24px; margin-bottom:10px; }
.product-page-price { font-size:20px; font-weight:700; margin-bottom:25px; }
.product-description { color:#aaa; line-height:1.5; font-size:14px; margin-bottom:25px; }
.size-title { font-size:14px; margin-bottom:10px; }
.sizes { display:flex; gap:8px; margin-bottom:25px; }
.size-button { width:52px; height:42px; background:#171717; color:white; border:1px solid #292929; border-radius:9px; }
.size-button.selected { background:white; color:black; border-color:white; }
.add-cart { width:100%; height:52px; background:white; color:black; border-radius:13px; font-size:15px; font-weight:700; }
.bottom-nav { position:fixed; bottom:0; left:50%; transform:translateX(-50%); width:100%; max-width:600px; height:70px; background:rgba(15,15,15,.96); border-top:1px solid #242424; display:grid; grid-template-columns:repeat(4,1fr); z-index:100; }
.bottom-nav button { background:transparent; color:#777; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; }
.bottom-nav button span { font-size:19px; }
.bottom-nav button small { font-size:10px; }
@media (max-width:380px) { .categories { grid-template-columns:repeat(2,1fr); } }


/* CART */
.cart-empty { text-align:center; padding:70px 20px; color:#888; }
.cart-empty-icon { font-size:50px; margin-bottom:15px; }
.cart-item { display:flex; gap:12px; padding:12px; margin-bottom:10px; background:#151515; border:1px solid #242424; border-radius:15px; }
.cart-item-image { width:82px; height:100px; flex-shrink:0; border-radius:10px; overflow:hidden; background:#202020; }
.cart-item-image img { width:100%; height:100%; object-fit:cover; display:block; }
.cart-item-info { flex:1; min-width:0; }
.cart-item-name { font-size:14px; font-weight:600; margin-bottom:5px; }
.cart-item-size { color:#888; font-size:12px; margin-bottom:8px; }
.cart-item-price { font-size:14px; font-weight:700; }
.cart-item-actions { display:flex; align-items:center; gap:7px; margin-top:10px; }
.quantity-button { width:30px; height:30px; border-radius:8px; background:#242424; color:#fff; font-size:17px; }
.quantity-value { min-width:22px; text-align:center; font-size:13px; }
.cart-delete { margin-left:auto; background:transparent; color:#777; font-size:18px; }
.cart-summary { margin-top:18px; padding:17px; background:#151515; border:1px solid #242424; border-radius:15px; }
.cart-summary-row { display:flex; justify-content:space-between; margin-bottom:14px; color:#aaa; font-size:14px; }
.cart-summary-total { display:flex; justify-content:space-between; font-size:20px; font-weight:700; padding-top:14px; border-top:1px solid #292929; }
.checkout-button { width:100%; height:52px; margin-top:15px; background:#fff; color:#000; border-radius:13px; font-size:15px; font-weight:700; }
.clear-cart { width:100%; margin-top:10px; height:44px; border-radius:11px; background:#1b1b1b; color:#aaa; border:1px solid #292929; }
.cart-badge { display:inline-flex; min-width:15px; height:15px; padding:0 4px; align-items:center; justify-content:center; border-radius:10px; background:#fff; color:#000; font-size:8px; vertical-align:middle; margin-left:2px; }
.cart-title-count { color:#777; font-size:13px; margin-left:5px; }


/* CHECKOUT */
.checkout-progress{display:flex;align-items:center;justify-content:center;margin:4px 0 25px}
.progress-dot{width:28px;height:28px;border-radius:50%;background:#242424;color:#777;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}
.progress-dot.active{background:white;color:black}
.progress-line{width:42px;height:1px;background:#333}
.checkout-section{margin-bottom:18px}
.checkout-label{font-size:13px;margin-bottom:8px;color:#d0d0d0}
.checkout-input{width:100%;min-height:48px;padding:13px 14px;border-radius:12px;border:1px solid #292929;outline:none;background:#171717;color:white;font-size:14px}
.checkout-input:focus{border-color:#666}
.checkout-textarea{min-height:92px;resize:vertical}
.promo-row{display:flex;gap:8px}
.promo-row .checkout-input{flex:1}
.promo-button{flex-shrink:0;border-radius:12px;padding:0 14px;background:#242424;color:white;font-size:12px;font-weight:700}
.promo-message{min-height:18px;margin-top:7px;font-size:12px;color:#8f8f8f}
.checkout-summary{background:#151515;border:1px solid #242424;border-radius:15px;padding:15px;margin:22px 0 14px}
.checkout-summary-row{display:flex;justify-content:space-between;gap:12px;color:#aaa;font-size:13px;margin-bottom:9px}
.checkout-summary-total{color:white;font-size:17px;font-weight:700;padding-top:9px;margin-top:9px;border-top:1px solid #292929}
.review-card{background:#151515;border:1px solid #242424;border-radius:15px;padding:15px;margin-bottom:12px}
.review-title{font-size:13px;color:#777;margin-bottom:7px}
.review-value{font-size:14px;line-height:1.45}
.review-item{padding:10px 0;border-bottom:1px solid #252525}
.review-item:last-child{border-bottom:none}
.review-item-name{font-size:14px;margin-bottom:4px}
.review-item-meta{color:#8b8b8b;font-size:12px}
.review-total{display:flex;justify-content:space-between;align-items:center;margin:18px 0;font-size:19px;font-weight:700}
.review-edit{width:100%;height:48px;margin-top:10px;background:#171717;color:white;border:1px solid #292929;border-radius:12px}
.success-box{min-height:65vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px}
.success-icon{width:64px;height:64px;border-radius:50%;background:white;color:black;display:flex;align-items:center;justify-content:center;font-size:34px;font-weight:700;margin-bottom:20px}
.success-box h1{font-size:25px;margin-bottom:10px}
.success-box p{color:#888;line-height:1.5;font-size:14px;margin-bottom:20px}
.success-order-info{width:100%;max-width:330px;background:#151515;border:1px solid #242424;border-radius:14px;padding:14px;margin-bottom:20px;color:#aaa;font-size:13px}

.size-button.disabled{opacity:.35;cursor:not-allowed;text-decoration:line-through}
button:disabled{opacity:.6;cursor:not-allowed}