.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:10px 16px;border:1px solid transparent;border-radius:11px;font-weight:800;font-size:.86rem;transition:var(--transition)}.btn:focus-visible,.icon-btn:focus-visible,.slider-arrow:focus-visible,.slider-dot:focus-visible,.wishlist-btn:focus-visible,.quick-view-btn:focus-visible{outline:3px solid rgba(37,99,235,.24);outline-offset:2px}.btn-primary{background:var(--primary);color:#fff;box-shadow:0 9px 22px rgba(37,99,235,.22)}.btn-primary:hover{background:var(--primary-dark);transform:translateY(-1px)}.btn-outline{background:#fff;color:#334155;border-color:var(--border)}.btn-outline:hover{border-color:#94a3b8;background:#f8fafc}.btn-light{background:#fff;color:#0f172a}.btn-light:hover{background:#f8fafc}.btn-danger{background:#fee2e2;color:#b91c1c}.btn-lg{min-height:50px;padding:13px 22px;border-radius:13px}.btn-block{width:100%}.btn:disabled,.btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed;transform:none;pointer-events:none}
.drawer-overlay,.modal-overlay{position:fixed;inset:0;z-index:80;background:rgba(15,23,42,.48);backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .22s ease}.drawer-overlay.is-open,.modal-overlay.is-open{opacity:1;pointer-events:auto}.side-drawer{position:fixed;top:0;right:0;z-index:90;width:min(430px,92vw);height:100dvh;background:#fff;box-shadow:-20px 0 60px rgba(15,23,42,.18);transform:translateX(100%);transition:transform .28s ease;display:flex;flex-direction:column}.side-drawer.left{left:0;right:auto;transform:translateX(-100%)}.side-drawer.is-open{transform:none}.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--border)}.drawer-head h2{color:var(--dark);font-size:1.1rem}.drawer-close{width:38px;height:38px;border:0;border-radius:50%;background:#f1f5f9;font-size:1.3rem}.drawer-body{padding:16px 20px;overflow:auto;flex:1}.drawer-footer{padding:16px 20px;border-top:1px solid var(--border);background:#fff}.drawer-subtotal{display:flex;justify-content:space-between;margin-bottom:12px;color:var(--dark);font-weight:800}.drawer-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.drawer-item{display:grid;grid-template-columns:68px 1fr auto;gap:12px;padding:12px 0;border-bottom:1px solid #f1f5f9}.drawer-item img{width:68px;height:68px;border-radius:10px;object-fit:cover;background:#f8fafc}.drawer-item strong{font-size:.85rem;color:var(--dark)}.drawer-item p{font-size:.78rem;color:var(--muted)}.drawer-item button{border:0;background:transparent;color:var(--danger);font-size:.75rem}.mobile-nav-list a{display:block;padding:13px 4px;border-bottom:1px solid #f1f5f9;color:var(--dark);font-weight:700}.mobile-nav-meta{display:grid;gap:8px;margin-top:18px}.mobile-nav-meta a,.mobile-nav-meta button{width:100%;text-align:left;border:0;background:#f8fafc;border-radius:10px;padding:11px 12px;color:#475569}
.modal-shell{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px;pointer-events:none}.modal-shell.is-open{pointer-events:auto}.modal-card{width:min(480px,100%);max-height:90dvh;overflow:auto;border-radius:22px;background:#fff;box-shadow:var(--shadow-lg);transform:translateY(16px) scale(.98);opacity:0;transition:.22s ease}.modal-shell.is-open .modal-card{transform:none;opacity:1}.modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:22px 24px 0}.modal-head h2{color:var(--dark);font-size:1.5rem}.modal-head p{margin-top:4px;color:var(--muted);font-size:.86rem}.modal-body{padding:22px 24px 26px}.auth-tabs{display:grid;grid-template-columns:1fr 1fr;background:#f1f5f9;border-radius:12px;padding:4px;margin-bottom:20px}.auth-tabs button{border:0;border-radius:9px;background:transparent;padding:9px;color:var(--muted);font-weight:800}.auth-tabs button.is-active{background:#fff;color:var(--primary);box-shadow:var(--shadow-sm)}.auth-form{display:grid;gap:13px}.auth-form .field{gap:5px}.auth-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:.78rem;color:var(--muted)}.auth-meta label{display:flex;align-items:center;gap:7px}.auth-meta button{border:0;background:transparent;color:var(--primary);font-weight:700}.form-message{min-height:20px;font-size:.8rem;color:var(--danger)}
.quick-view-grid{display:grid;grid-template-columns:180px 1fr;gap:22px}.quick-view-grid img{width:180px;height:180px;border-radius:16px;object-fit:cover;background:#f8fafc}.quick-view-grid h3{color:var(--dark);font-size:1.3rem}.quick-view-grid p{color:var(--muted);font-size:.88rem;margin:8px 0}.quick-actions{display:flex;gap:9px;margin-top:14px}.toast-stack{position:fixed;right:18px;bottom:18px;z-index:140;display:grid;gap:10px;width:min(360px,calc(100vw - 36px))}.toast{display:flex;align-items:flex-start;gap:10px;padding:13px 14px;border:1px solid var(--border);border-radius:13px;background:#fff;box-shadow:var(--shadow-md);animation:toastIn .22s ease}.toast-icon{display:grid;place-items:center;width:28px;height:28px;flex:0 0 28px;border-radius:50%;background:#dcfce7;color:#15803d;font-weight:800}.toast.error .toast-icon{background:#fee2e2;color:#b91c1c}.toast.warning .toast-icon{background:#fef3c7;color:#92400e}.toast p{font-size:.83rem;color:#334155}.toast button{margin-left:auto;border:0;background:transparent;color:#94a3b8}.toast.is-leaving{animation:toastOut .18s ease forwards}@keyframes toastIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}@keyframes toastOut{to{opacity:0;transform:translateY(10px)}}
.skeleton-card{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:#fff}.skeleton,.skeleton-block{position:relative;overflow:hidden;background:#e2e8f0}.skeleton::after,.skeleton-block::after{content:'';position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);animation:shimmer 1.2s infinite}.skeleton-image{aspect-ratio:1/1}.skeleton-lines{padding:16px}.skeleton-line{height:12px;border-radius:999px;margin-bottom:10px}.skeleton-line.short{width:52%}.detail-skeleton{height:520px;border-radius:var(--radius-lg)}@keyframes shimmer{100%{transform:translateX(100%)}}