:root{--cobalt:#1D4DFF;--cobalt-dark:#1540D4;--cobalt-light:#EEF2FF;--orange:#FF6B1A;--orange-dark:#E55A0A;--orange-light:#FFF4ED;--navy:#0F172A;--gray-50:#F8FAFC;--gray-100:#F1F5F9;--gray-200:#E2E8F0;--gray-300:#CBD5E1;--gray-400:#94A3B8;--gray-500:#64748B;--gray-600:#475569;--green:#16A34A;--red:#DC2626;--purple:#7C3AED}
*{margin:0;padding:0;box-sizing:border-box}html{overflow-x:hidden}body{font-family:'Inter',sans-serif;background:var(--gray-100);color:var(--navy);-webkit-font-smoothing:antialiased;display:flex;flex-direction:column;min-height:100vh;overflow-x:hidden;width:100%}.page-wrap{flex:1}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}:focus-visible{outline:2px solid var(--cobalt);outline-offset:2px}button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--cobalt);outline-offset:2px}
/* === SHARED: Top bar === */
.top-bar-wrap{background:var(--orange);border-bottom:1px solid rgba(255,255,255,.15)}.top-bar{max-width:1280px;margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;height:36px;font-size:12px;color:rgba(255,255,255,.85)}
.top-bar-left{display:flex;align-items:center;gap:18px}
.top-bar-badge{display:inline-flex;align-items:center;gap:6px;background:white;color:var(--orange);font-weight:700;font-size:11px;padding:4px 12px;border-radius:20px;letter-spacing:.2px;animation:pulse 2.2s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,107,26,.4)}50%{box-shadow:0 0 0 8px rgba(255,107,26,0)}}
.top-bar-link{display:inline-flex;align-items:center;gap:5px;color:rgba(255,255,255,.55);text-decoration:none;font-weight:500;transition:color .15s;font-size:12px}.top-bar-link:hover{color:white}
.top-bar-right{display:flex;align-items:center;gap:8px}
.top-bar-sep{color:rgba(255,255,255,.2);font-size:10px}
.top-bar-lang{display:inline-flex;align-items:center;gap:5px;color:rgba(255,255,255,.55);font-weight:600;font-size:12px;cursor:pointer;padding:3px 8px;border-radius:4px;transition:all .15s}.top-bar-lang:hover{color:white;background:rgba(255,255,255,.08)}
/* === SHARED: Header === */
.header{background:var(--navy);position:sticky;top:0;z-index:1000;box-shadow:0 2px 12px rgba(15,23,42,.35)}
.header-inner{max-width:1280px;margin:0 auto;padding:12px 24px;display:flex;align-items:center;gap:20px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0}
.logo-icon{width:38px;height:38px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.logo-icon svg{width:100%;height:100%;display:block}
.logo-text{font-family:'Manrope',sans-serif;font-weight:800;font-size:22px;color:white;letter-spacing:-0.8px}
.logo-text em{color:var(--orange);font-style:normal}
.logo-tagline{font-size:10px;font-weight:500;color:var(--gray-400);letter-spacing:.5px;margin-top:-2px}
.search-wrap{flex:1;display:flex;background:white;border-radius:8px;overflow:hidden;transition:box-shadow .2s}
.search-wrap:focus-within{box-shadow:0 0 0 3px rgba(255,107,26,.25)}
.search-cat{border:none;border-right:1.5px solid var(--gray-200);padding:0 14px;font-size:13px;font-family:'Inter',sans-serif;color:var(--gray-600);background:var(--gray-50);cursor:pointer;outline:none;font-weight:500;min-width:130px;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%2394A3B8' d='M1 3l4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center}
.search-input{flex:1;border:none;outline:none;padding:8px 16px;font-size:14px;font-family:'Inter',sans-serif;color:var(--navy)}
.search-input::placeholder{color:var(--gray-400)}
.search-btn{background:var(--orange);border:none;padding:0 20px;cursor:pointer;color:white;font-weight:700;font-size:13px;font-family:'Inter',sans-serif;transition:background .2s;display:flex;align-items:center;gap:6px}
.search-btn:hover{background:var(--orange-dark)}
.hdr-btn{display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 12px;color:white;border-radius:9px;transition:background .15s;cursor:pointer;border:none;background:transparent;font-family:'Inter',sans-serif;text-decoration:none;min-width:56px}
.hdr-btn:hover{background:rgba(255,255,255,.12)}
.hdr-btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hdr-btn-icon{font-size:18px;line-height:1}.hdr-btn-label{font-size:11px;font-weight:600;white-space:nowrap}
.fav-btn{position:relative}.fav-btn:hover svg{fill:var(--red);stroke:var(--red)}
.hdr-fav-btn{position:relative}.hdr-fav-btn:hover svg{fill:var(--red);stroke:var(--red)}
.fav-badge{position:absolute;top:2px;right:6px;background:var(--red);color:white;font-size:9px;font-weight:800;width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-style:normal}
.cart-btn{position:relative}
.cart-badge{position:absolute;top:2px;right:8px;background:var(--red);color:white;font-size:10px;font-weight:800;width:17px;height:17px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.header-actions{display:flex;align-items:center;gap:6px;flex-shrink:0;margin-left:auto}
/* Header icon links */
.hdr-btn-link{display:flex;flex-direction:column;align-items:center;gap:3px;color:inherit;text-decoration:none}
/* Cart dropdown */
.cart-dropdown{display:none;position:absolute;top:calc(100% + 12px);right:0;width:320px;background:white;border-radius:12px;box-shadow:0 8px 30px rgba(0,0,0,.15);border:1.5px solid var(--gray-200);z-index:1000;overflow:visible}
.cart-dropdown .cart-dd-inner{margin-top:0}
.cart-btn:hover .cart-dropdown,.hdr-fav-btn:hover .fav-dropdown{display:block}
.cart-dropdown::before{content:'';position:absolute;top:-8px;right:16px;width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:8px solid white;z-index:2}
.cart-dropdown::after{content:'';position:absolute;top:-36px;left:0;right:0;height:36px}
.cart-dd-inner{border-radius:12px;overflow:hidden;background:white}
.cart-dd-header{padding:12px 16px;border-bottom:1px solid var(--gray-100);font-family:'Manrope',sans-serif;font-weight:700;font-size:12px;color:var(--gray-400);text-transform:uppercase;letter-spacing:.5px}
.cart-dd-items{max-height:240px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--gray-200) transparent}
.cart-dd-item{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--gray-100);transition:background .15s}
.cart-dd-item:hover{background:var(--gray-50)}
.cart-dd-img{width:52px;height:52px;border-radius:8px;object-fit:contain;background:var(--gray-50);padding:4px;flex-shrink:0}
.cart-dd-info{flex:1;min-width:0}
.cart-dd-name{font-size:12px;font-weight:600;color:var(--navy);line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cart-dd-meta{display:flex;align-items:center;gap:8px;margin-top:4px;font-size:11px;color:var(--gray-400)}
.cart-dd-qty{font-weight:600}
.cart-dd-price{font-weight:700;color:var(--cobalt);margin-left:auto;font-size:13px;white-space:nowrap}
.cart-dd-remove{background:none;border:none;color:var(--gray-300);cursor:pointer;font-size:14px;padding:12px;min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;transition:color .15s;flex-shrink:0}.cart-dd-remove:hover{color:var(--red)}
.cart-dd-footer{padding:14px 16px;border-top:1px solid var(--gray-200);background:var(--gray-50)}
.cart-dd-total{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;font-family:'Manrope',sans-serif}
.cart-dd-total-label{font-size:13px;font-weight:600;color:var(--gray-500)}
.cart-dd-total-price{font-size:16px;font-weight:800;color:var(--navy)}
.cart-dd-btn{display:block;width:100%;padding:11px;background:var(--cobalt);color:white;border:none;border-radius:9px;font-family:'Inter',sans-serif;font-size:13px;font-weight:700;cursor:pointer;text-align:center;text-decoration:none;transition:background .15s}.cart-dd-btn:hover{background:var(--cobalt-dark)}
/* === SHARED: Nav === */
.nav-bar{background:var(--navy);border-top:1px solid rgba(255,255,255,.07)}
.nav-inner{max-width:1280px;margin:0 auto;padding:0 24px;display:flex;align-items:center;gap:2px}
.nav-item{display:flex;align-items:center;gap:6px;padding:10px 14px;color:rgba(255,255,255,.82);font-size:13px;font-weight:500;text-decoration:none;transition:all .15s;border-bottom:3px solid transparent;white-space:nowrap}
.nav-item:hover,.nav-item.on{color:white;border-bottom-color:var(--orange)}
.nav-cat-btn{display:flex;align-items:center;gap:8px;padding:9px 18px;background:var(--cobalt);color:white;font-size:13px;font-weight:700;border:none;border-radius:9px;cursor:pointer;font-family:'Inter',sans-serif;transition:background .15s;white-space:nowrap}.nav-cat-btn:hover{background:var(--cobalt-dark)}
.nav-cat-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.nav-flash{color:#FDE047!important;font-weight:700}
.nav-deals{color:#FCA5A5!important;font-weight:700}
.nav-spacer{flex:1}.nav-hotline{color:rgba(255,255,255,.5);font-size:12px;display:flex;align-items:center;gap:6px;padding:10px 0}.nav-hotline strong{color:white}
/* === Page wrap + Breadcrumb === */
.page-wrap{max-width:1280px;margin:0 auto;padding:24px 24px 40px;width:100%}
.breadcrumb{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--gray-500);margin-bottom:20px;flex-wrap:wrap}
.breadcrumb a{color:var(--gray-500);text-decoration:none;transition:color .2s}.breadcrumb a:hover{color:var(--cobalt)}
.breadcrumb span{color:var(--navy);font-weight:600}
/* Product card (shared) */
.product-card{background:white;border-radius:12px;border:1.5px solid var(--gray-200);overflow:hidden;cursor:pointer;transition:all .22s;position:relative;min-width:220px;max-width:220px;flex-shrink:0}
.product-card:hover{border-color:var(--cobalt);box-shadow:0 8px 24px rgba(29,77,255,.12);transform:translateY(-4px)}
.product-badge{position:absolute;top:10px;left:10px;font-size:10px;font-weight:800;padding:3px 8px;border-radius:5px;text-transform:uppercase;letter-spacing:.5px;z-index:2}
.badge-sale{background:var(--red);color:white}.badge-new{background:var(--cobalt);color:white}.badge-top{background:var(--orange);color:white}.badge-hot{background:var(--purple);color:white}
.product-fav{position:absolute;top:10px;right:10px;width:30px;height:30px;background:white;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;box-shadow:0 2px 6px rgba(0,0,0,.1);z-index:2;opacity:0;transition:opacity .15s;cursor:pointer;border:none;color:var(--gray-400)}
.product-card:hover .product-fav{opacity:1}
.product-fav:hover{color:var(--red)}
.product-img{width:100%;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;background:#fff;padding:20px;font-size:44px;border:none;border-radius:0;margin:0}
.product-img img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.img-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:var(--gray-100);color:var(--gray-300);font-size:3rem;border-radius:8px}
.product-info{padding:14px}
.product-brand{font-size:11px;font-weight:700;color:var(--gray-400);text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}
.product-name{font-size:13px;font-weight:500;color:var(--navy);line-height:1.45;margin-bottom:6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;height:38px}
.product-rating{display:flex;align-items:center;gap:5px;margin-bottom:6px}.stars{color:#F59E0B;font-size:11px;letter-spacing:-1px}.rating-count{font-size:11px;color:var(--gray-400)}
.product-stock{font-size:11px;font-weight:600;margin-bottom:6px}.product-stock.in-stock{color:var(--green)}.product-stock.limited{color:var(--orange)}
.product-price-old{font-size:11px;color:var(--gray-400);text-decoration:line-through}
.product-price-row{display:flex;flex-direction:column;align-items:stretch;margin-top:4px;gap:4px}
.product-price{font-family:'Manrope',sans-serif;font-weight:800;font-size:20px;color:var(--red);letter-spacing:-0.5px}
.product-save{display:inline-block;font-size:10px;font-weight:700;color:var(--green);background:#F0FDF4;padding:2px 8px;border-radius:4px;margin-top:6px}
.product-cart-btn{width:100%;height:40px;border-radius:10px;background:#16a34a;color:white;border:none;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;cursor:pointer;transition:all .15s;flex-shrink:0;gap:8px;margin-top:6px}
.product-cart-btn:hover{background:#15803d;transform:scale(1.02)}
.cart-btn-text{display:inline;font-size:13px;font-weight:700}
/* === SHARED: Footer === */
.footer{background:var(--navy);color:white;margin-top:48px}
.footer-top{max-width:1280px;margin:0 auto;padding:48px 24px 32px;display:grid;grid-template-columns:300px 1fr 1fr 1fr;gap:48px}
.footer-desc{font-size:13px;color:var(--gray-400);line-height:1.7;margin:16px 0 20px;max-width:240px}
.footer-socials{display:flex;gap:8px}
.social-btn{width:36px;height:36px;background:rgba(255,255,255,.07);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:16px;cursor:pointer;transition:background .15s}.social-btn:hover{background:var(--cobalt)}
.footer-col h4{font-family:'Manrope',sans-serif;font-weight:700;font-size:13px;letter-spacing:1.5px;text-transform:uppercase;color:var(--gray-400);margin-bottom:16px}
.footer-links{display:flex;flex-direction:column;gap:10px}.footer-links a{font-size:13.5px;color:var(--gray-400);text-decoration:none;transition:color .15s;display:flex;align-items:center;gap:8px}.footer-links a:hover{color:white}
.footer-links a::before{content:'›';font-size:16px;font-weight:700;color:var(--gray-500);transition:color .15s}.footer-links a:hover::before{color:var(--orange)}
.footer-contact{display:flex;flex-direction:column;gap:14px;margin-top:16px}
.footer-contact-item{display:flex;align-items:flex-start;gap:10px;font-size:13px;color:var(--gray-400);line-height:1.6}
.footer-contact-item i{color:var(--orange);font-size:14px;margin-top:3px;width:16px;flex-shrink:0}
.footer-contact-item a{color:var(--gray-400);text-decoration:none;transition:color .15s}.footer-contact-item a:hover{color:white}
.footer-bottom{border-top:1px solid rgba(255,255,255,.06);padding:20px 24px;max-width:1280px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--gray-500);flex-wrap:wrap;gap:12px}
.footer-bottom-left{display:flex;flex-direction:column;gap:4px}
.footer-bottom-right{display:flex;gap:24px;align-items:center;flex-wrap:wrap}.footer-bottom-right a{color:var(--gray-500);text-decoration:none;transition:color .15s}.footer-bottom-right a:hover{color:white}
.footer-badges{display:flex;gap:10px;align-items:center;margin-top:6px;flex-wrap:wrap}.footer-badge{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:6px;padding:4px 10px;font-size:10px;font-weight:700;color:var(--gray-400);text-decoration:none;transition:all .15s}.footer-badge:hover{background:rgba(255,255,255,.12);color:white}.footer-badge-img{display:inline-flex;text-decoration:none;border-radius:8px;overflow:hidden;transition:opacity .15s,transform .15s}.footer-badge-img:hover{opacity:.85;transform:translateY(-1px)}.footer-badge-img img{height:30px;width:auto;display:block}
.payment-icons{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:16px}
.pay-icon{background:rgba(255,255,255,.08);border-radius:6px;padding:5px 10px;font-size:11px;font-weight:700;color:var(--gray-300)}
/* === SHARED: Floating + Back to top === */
.floating-help{position:fixed;bottom:28px;right:28px;background:var(--cobalt);color:white;width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:22px;cursor:pointer;box-shadow:0 4px 20px rgba(29,77,255,.45);transition:transform .2s;z-index:999;border:none}.floating-help:hover{transform:scale(1.1)}

.top-bar i,.nav-item i,.nav-hotline i,.social-btn i,.floating-help i{color:currentColor}
/* === SHARED: Burger + Mobile menu === */
.burger-btn{display:none;background:none;border:none;color:white;font-size:22px;cursor:pointer;padding:8px;border-radius:8px;transition:background .15s;flex-shrink:0}.burger-btn:hover{background:rgba(255,255,255,.12)}
.mm-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:2000;opacity:0;transition:opacity .3s}
.mm-overlay.on{display:block;opacity:1}
.mm{position:fixed;top:0;left:0;width:100%;max-width:380px;height:100%;background:#fff;z-index:2001;transform:translateX(-100%);transition:transform .3s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;box-shadow:4px 0 24px rgba(0,0,0,.12)}
.mm.on{transform:translateX(0)}
.mm-header{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1px solid var(--gray-100);flex-shrink:0;background:#fff}
.mm-header .logo-text{font-family:'Manrope',sans-serif;font-weight:800;font-size:20px;color:var(--navy)}
.mm-header .logo-text em{color:var(--orange);font-style:normal}
.mm-close{background:none;border:none;color:var(--navy);font-size:20px;cursor:pointer;padding:4px 8px;border-radius:6px;transition:background .15s}.mm-close:hover{background:var(--gray-100)}
/* Search */
.mm-search{padding:12px 16px;border-bottom:1px solid var(--gray-100);flex-shrink:0}
.mm-search-form{display:flex;align-items:center;gap:10px;background:var(--gray-50);border:1.5px solid var(--gray-200);border-radius:10px;padding:10px 14px;transition:border-color .15s}
.mm-search-form:focus-within{border-color:var(--navy)}
.mm-search-form i{color:var(--gray-400);font-size:14px;flex-shrink:0}
.mm-search-form input{border:none;background:none;outline:none;font-size:15px;color:var(--navy);width:100%;font-family:inherit}
.mm-search-form input::placeholder{color:var(--gray-400)}
/* Panels */
.mm-panels{flex:1;position:relative;overflow:hidden}
.mm-panel{position:absolute;inset:0;transform:translateX(100%);pointer-events:none;opacity:0}
.mm-panel.mm-visible{opacity:1;pointer-events:auto;transition:transform .3s cubic-bezier(.4,0,.2,1)}
.mm-panel.mm-at-center{transform:translateX(0)}
.mm-panel.mm-at-left{transform:translateX(-100%)}
.mm-panel.mm-at-right{transform:translateX(100%)}
.mm-panel-scroll{height:100%;overflow-y:auto;padding-bottom:80px;-webkit-overflow-scrolling:touch}
/* Items */
.mm-item{display:flex;align-items:center;gap:12px;padding:14px 20px;color:var(--navy);font-size:15px;font-weight:500;text-decoration:none;border:none;background:none;width:100%;text-align:left;cursor:pointer;transition:background .12s;font-family:inherit}
.mm-item:hover,.mm-item:active{background:var(--gray-50)}
.mm-item-icon{width:24px;display:flex;align-items:center;justify-content:center;color:var(--gray-500);font-size:16px;flex-shrink:0}
.mm-item-label{flex:1;min-width:0}
.mm-item-arrow{font-size:11px;color:var(--gray-400);flex-shrink:0;transition:transform .15s}
.mm-item-drill:hover .mm-item-arrow{transform:translateX(2px);color:var(--navy)}
.mm-item-all{color:var(--navy);font-weight:700;font-size:14px}
.mm-item-all .mm-item-arrow{font-size:12px}
/* Back button */
.mm-back{display:flex;align-items:center;gap:8px;padding:14px 20px;color:var(--gray-500);font-size:14px;font-weight:600;background:none;border:none;border-bottom:1px solid var(--gray-100);width:100%;text-align:left;cursor:pointer;font-family:inherit;transition:color .12s}
.mm-back:hover{color:var(--navy)}
.mm-back i{font-size:13px}
/* Panel title */
.mm-panel-title{font-size:18px;font-weight:800;color:var(--navy);padding:16px 20px 8px;font-family:'Manrope',sans-serif}
/* Section label + divider */
.mm-section-label{font-size:11px;font-weight:700;color:var(--gray-400);text-transform:uppercase;letter-spacing:.8px;padding:16px 20px 6px}
.mm-divider{height:1px;background:var(--gray-100);margin:6px 20px}
/* === RESPONSIVE: Shared === */
@media(max-width:1024px){
.footer-top{grid-template-columns:repeat(2,1fr);gap:32px}
.footer-bottom{flex-wrap:wrap}
}
@media(max-width:768px){
.top-bar-right{display:none}
.top-bar-left{gap:10px}
.top-bar-left .top-bar-link{display:none}
.top-bar{padding:0 16px;justify-content:center}
.burger-btn{display:flex}
.search-wrap{display:flex;order:10;flex:none;width:100%;border-radius:8px}
.search-cat{display:none}
.search-btn{padding:0 14px;font-size:0}
.search-btn i{font-size:16px}
.logo-tagline{display:none}
.header-actions{display:none}
.header-inner{padding:10px 16px;gap:8px;flex-wrap:wrap;justify-content:center;position:relative}
.burger-btn{position:absolute;left:16px;top:10px;z-index:2}
.logo{order:1}
.nav-bar{display:none}
.cart-dropdown{display:none!important}
.page-wrap{padding:16px}
.product-fav{opacity:1;width:26px;height:26px;font-size:12px}
.product-badge{font-size:9px;padding:2px 6px;top:8px;left:8px}
.product-info{padding:8px 10px}
.product-name{font-size:12px;height:32px;margin-bottom:2px}
.product-price{font-size:16px}
.product-price-old{font-size:10px}
.product-brand{font-size:10px;margin-bottom:1px}
.product-rating{gap:3px;margin-bottom:1px}.stars{font-size:10px}.rating-count{font-size:10px}
.product-stock{font-size:10px;margin-bottom:2px}
.product-save{font-size:9px;padding:2px 6px}
.product-price-row{flex-direction:column;align-items:stretch;gap:4px}
.product-cart-btn{width:100%;height:38px;border-radius:10px;font-size:13px;font-weight:700;order:10;background:#16a34a}
.cart-btn-text{display:inline;font-size:12px;font-weight:600}
.product-img{padding:20px;margin:0}
.footer-top{grid-template-columns:1fr;gap:24px}
.footer-bottom{flex-direction:column;text-align:center}
.footer{padding-bottom:70px}
}
/* === ORDER CARDS (eMAG-style) === */
.oc-empty{text-align:center;padding:48px 20px;color:var(--gray-400)}
.oc-empty i{font-size:44px;margin-bottom:14px;display:block}
.oc-empty p{margin:0 0 18px}
.oc-empty-btn{display:inline-block;padding:11px 24px;background:var(--cobalt);color:white;border-radius:10px;text-decoration:none;font-weight:700;font-size:14px;transition:background .15s}
.oc-empty-btn:hover{background:var(--cobalt-dark)}
.oc-list{display:flex;flex-direction:column;gap:16px}
.oc-card{background:white;border:1.5px solid var(--gray-200);border-radius:14px;overflow:hidden;transition:border-color .2s,box-shadow .2s}
.oc-card:hover{border-color:var(--gray-300)}
.oc-card.open{box-shadow:0 4px 24px rgba(0,0,0,.06)}
.oc-card--alert{border-color:#F59E0B;background:linear-gradient(135deg,#FFFBEB 0%,white 40%)}
/* Top bar */
.oc-topbar{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1px solid var(--gray-100);gap:12px;flex-wrap:wrap}
.oc-order-id{font-size:13px;color:var(--gray-500)}
.oc-order-id strong{color:var(--navy);font-family:'Manrope',sans-serif;font-weight:800}
/* Status timeline */
.oc-timeline{display:flex;align-items:flex-start;padding:20px 24px 16px;gap:0;position:relative}
.oc-timeline-step{flex:1;display:flex;flex-direction:column;align-items:center;position:relative;z-index:1}
.oc-timeline-step:not(:last-child)::after{content:'';position:absolute;top:8px;left:calc(50% + 10px);width:calc(100% - 20px);height:2px;background:var(--gray-200);z-index:0}
.oc-timeline-step.done:not(:last-child)::after{background:var(--cobalt)}
.oc-timeline-dot{width:18px;height:18px;border-radius:50%;border:2px solid var(--gray-200);background:white;position:relative;z-index:1;transition:all .2s}
.oc-timeline-step.done .oc-timeline-dot{border-color:var(--cobalt);background:var(--cobalt)}
.oc-timeline-step.done .oc-timeline-dot::after{content:'\f00c';font-family:'Font Awesome 6 Free';font-weight:900;font-size:8px;color:white;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
.oc-timeline-step.current .oc-timeline-dot{border-color:var(--cobalt);box-shadow:0 0 0 4px rgba(59,130,246,.15);background:var(--cobalt)}
.oc-timeline-step.current .oc-timeline-dot::after{content:'';width:6px;height:6px;border-radius:50%;background:white;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
.oc-timeline-label{font-size:11px;color:var(--gray-400);margin-top:8px;font-weight:500;text-align:center}
.oc-timeline-step.done .oc-timeline-label{color:var(--cobalt);font-weight:600}
.oc-timeline-step.current .oc-timeline-label{color:var(--cobalt);font-weight:700}
/* Product thumbnails strip */
.oc-thumbs{display:flex;align-items:center;gap:8px;padding:12px 20px;overflow-x:auto;scrollbar-width:none}
.oc-thumbs::-webkit-scrollbar{display:none}
.oc-thumb{width:56px;height:56px;border-radius:10px;border:1.5px solid var(--gray-200);overflow:hidden;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:white;position:relative;transition:border-color .15s}
.oc-thumb:hover{border-color:var(--cobalt)}
.oc-thumb img{width:100%;height:100%;object-fit:cover}
.oc-thumb i{color:var(--gray-300);font-size:16px}
.oc-thumb-qty{position:absolute;bottom:2px;right:2px;background:var(--navy);color:white;font-size:9px;font-weight:700;padding:1px 5px;border-radius:6px;line-height:1.3}
.oc-thumb-more{width:56px;height:56px;border-radius:10px;border:1.5px dashed var(--gray-300);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:var(--gray-500);flex-shrink:0}
/* Footer */
.oc-footer{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-top:1px solid var(--gray-100);gap:12px;flex-wrap:wrap}
.oc-footer-info{display:flex;flex-direction:column;gap:2px}
.oc-total-label{font-size:12px;color:var(--gray-500)}
.oc-total-price{font-family:'Manrope',sans-serif;font-weight:800;font-size:18px;color:var(--navy)}
.oc-footer-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
/* Buttons */
.oc-btn{display:inline-flex;align-items:center;gap:6px;padding:10px 18px;border-radius:10px;font-size:13px;font-weight:700;cursor:pointer;transition:all .15s;font-family:'Inter',sans-serif;border:none}
.oc-btn--details{background:var(--gray-100);color:var(--navy)}
.oc-btn--details:hover{background:var(--gray-200)}
.oc-card.open .oc-btn--details{background:var(--cobalt-light);color:var(--cobalt)}
.oc-btn--pay{background:var(--cobalt);color:white}
.oc-btn--pay:hover{background:var(--cobalt-dark)}
.oc-btn--cancel{background:transparent;border:1.5px solid var(--red);color:var(--red)}
.oc-btn--cancel:hover{background:var(--red);color:white}
/* Expandable body */
.oc-body{max-height:0;overflow:hidden;transition:max-height .4s cubic-bezier(.4,0,.2,1)}
.oc-card.open .oc-body{max-height:1400px}
.oc-products{padding:16px 20px;border-top:1px solid var(--gray-100);display:flex;flex-direction:column;gap:6px}
.oc-products-title{font-family:'Manrope',sans-serif;font-weight:700;font-size:13px;color:var(--navy);margin-bottom:6px;text-transform:uppercase;letter-spacing:.03em}
.oc-product{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;padding:10px 12px;border-radius:10px;transition:background .15s}
.oc-product:hover{background:var(--gray-50)}
.oc-product-img{width:48px;height:48px;object-fit:cover;border-radius:8px;border:1px solid var(--gray-100);flex-shrink:0}
.oc-product-img--empty{display:flex;align-items:center;justify-content:center;background:var(--gray-50);color:var(--gray-300);font-size:14px}
.oc-product-info{flex:1;min-width:0}
.oc-product-name{font-weight:600;font-size:13px;color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.oc-product-qty{font-size:12px;color:var(--gray-500);margin-top:2px}
.oc-product-total{font-family:'Manrope',sans-serif;font-weight:700;font-size:13px;color:var(--navy);flex-shrink:0}
.oc-details{padding:0 20px 20px;display:flex;flex-direction:column;gap:16px}
.oc-detail-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.oc-detail-label{font-size:11px;color:var(--gray-400);font-weight:600;text-transform:uppercase;letter-spacing:.03em;margin-bottom:4px;display:flex;align-items:center;gap:5px}
.oc-detail-label i{font-size:10px}
.oc-detail-value{font-size:13px;font-weight:500;color:var(--navy)}
.oc-totals{background:var(--gray-50);border-radius:10px;padding:14px 16px;display:flex;flex-direction:column;gap:6px}
.oc-totals-row{display:flex;justify-content:space-between;font-size:13px;color:var(--gray-600)}
.oc-totals-final{font-family:'Manrope',sans-serif;font-weight:800;font-size:15px;color:var(--navy);padding-top:8px;border-top:1px solid var(--gray-200)}
/* === Mobile bottom nav === */
.mob-nav{display:none}
@media(max-width:768px){
.mob-nav{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:9999;background:#fff;border-top:1px solid var(--gray-200);padding:6px 0 env(safe-area-inset-bottom,6px);justify-content:space-around;align-items:center}
.mob-nav-item{display:flex;flex-direction:column;align-items:center;gap:2px;text-decoration:none;color:var(--gray-400);font-size:10px;font-weight:500;padding:4px 12px;position:relative;transition:color .15s}
.mob-nav-item i{font-size:20px;line-height:1}
.mob-nav-item.active{color:var(--navy)}
.mob-nav-item:hover{color:var(--navy)}
.mob-nav-badge{position:absolute;top:0;right:4px;background:#dc2626;color:#fff;font-size:9px;font-weight:700;min-width:16px;height:16px;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:0 4px}
.oc-topbar{padding:10px 14px;gap:8px}
.oc-topbar{flex-direction:column;align-items:flex-start;gap:6px}
.oc-order-id{font-size:12px}
.oc-timeline{padding:14px 12px 10px}
.oc-timeline-label{font-size:9px}
.oc-timeline-dot{width:14px;height:14px}
.oc-timeline-step.done .oc-timeline-dot::after{font-size:6px}
.oc-timeline-step:not(:last-child)::after{top:6px;left:calc(50% + 8px);width:calc(100% - 16px)}
.oc-thumbs{padding:10px 14px;gap:6px}
.oc-thumb{width:46px;height:46px;border-radius:8px}
.oc-thumb-more{width:46px;height:46px}
.oc-footer{padding:12px 14px;flex-direction:column;align-items:stretch;gap:10px}
.oc-footer-actions{justify-content:stretch}
.oc-btn{flex:1;justify-content:center;padding:10px 12px;font-size:12px}
.oc-detail-row{grid-template-columns:1fr;gap:10px}
.oc-products{padding:12px 14px}
.oc-product{padding:8px 10px;gap:10px}
.oc-product-img{width:40px;height:40px}
.oc-details{padding:0 14px 14px}
.wa-float{bottom:72px!important}
#mts-chat-btn{bottom:72px!important}
#mts-chat-win{bottom:136px!important}
}
@media(max-width:480px){
.top-bar-badge{font-size:10px;padding:3px 8px}
.top-bar{height:32px}
.header-inner{padding:8px 16px;gap:6px}
.logo-icon{width:32px;height:32px}
.logo-text{font-size:19px}
.search-input{font-size:14px;padding:8px 12px}
.search-btn{padding:0 12px}
.page-wrap{padding:12px 12px 20px}
.product-card{min-width:0;max-width:none}
.product-info{padding:8px}
.product-name{font-size:11.5px;height:auto;-webkit-line-clamp:2}
.product-price{font-size:15px}
.product-img{padding:14px}
.footer-top{padding:32px 16px 24px;gap:20px}
.footer-bottom{padding:16px}
.footer-col h4{font-size:12px;margin-bottom:12px}
.footer-links a{font-size:12.5px}
.footer-desc{max-width:100%;font-size:12px}
.mm{max-width:100%}
.mob-nav-item{padding:4px 8px;font-size:9px}
.mob-nav-item i{font-size:18px}
}
@media(max-width:768px){body{padding-top:80px;background-color:#000}body::before{content:"";position:fixed;top:0;left:0;right:0;height:80px;background:#000;z-index:9999}}